Pass database content from one page to another

Asked

Viewed 146 times

2

It seems to be something simple to research, but I’m not getting it. I would like when clicked on a list item, to open a new page with the detailed information of that item, will be the same information used on the home page. But I don’t know how to do that. I created only one page, but I need to receive the content of each item clicked on it. Lista de itens

Conteudo quando clicado

I made a button and when I click goes to the page, I just need to get the data there. I didn’t post the code because I don’t know exactly what part of the code to post here, but if anyone can help me and need it, just let me know. I want to receive the same information on the second page, but of the selected item. Thanks!

html page1 <ion-item no-lines *ngFor="let produto of produtos" no-padding> <h3 class="nomproduto"> {{produto.nom_produto}} </h3>

ts page 1

this.navCtrl.push(ConteudoprodutoPage, {valor: "{produto.nom_produto}"} )

ts page 2

  export class ConteudoprodutoPage {

  valor ="";


 constructor(public navCtrl: NavController, public navParams: NavParams) {
 this.valor = this.navParams.get("valor");
  }

html page 2 <ion-card-header> {{produto.nom_produto}} </ion-card-header>

database angularjs ionic sqlite apache-cordova

1 answer

3


You can pass as a parameter in navigating between pages. This would be the code to call the next page:

this.navCtrl.push("PaginaDetalhesPage", {itemSelecionado: item});

On the page opened with the details, you get the value of browsing:

this.item = navParams.get('itemSelecionado');

  • But what would " {itemSelected: item}" ?

  • It would be the selected ngFor item on the first page, with the list of all items.

  • I didn’t see the click on your html, but I believe you are passing the product as a parameter. You can pass the total product to the next page, not just the name. On ts page 1: this.navCtrl.push(ConteudoprodutoPage, {valor: produto} ). On ts page 2, you receive this parameter that you passed as the product itself and not as a new variable. this.produto = this.navParams.get("valor"); The this.produto is what you use in page 2 html.

  • I am able to receive the data on the other page, but can I filter to receive only from the clicked item? Have have, but do not know if you understood what I meant. Whenever you click on a product, show only his information.

  • Yes, in html, include the click function on the line where you inform ngFor: <ion-item no-lines *ngFor="let produto of produtos" no-padding (click)="produtoSelecionado(produto)">. In that capacity produtoSelecionado(produto), call the next page, stating as navigation parameter the product you received, as I reported earlier: this.navCtrl.push(ConteudoprodutoPage, {valor: produto} ).

  • and in the html of page 2? if I use // <ion-card *ngFor="Let product of products" class="cardcontent"> // it takes all items, but if I do not use error

  • In the html of page 2 you only have the produto, which came from navigation in this.produto = this.navParams.get("valor");. On page 2 you do not need to have the produtos. In page 2 html you do not need to use ngFor, but only product data.

  • I get the error when I use <ion-card-header> {{product.nom_product}} </ion-card-header> on page 2. Runtime Error Uncaught (in Promise): Typeerror: Cannot read Property 'product name' of Undefined Typeerror.

  • You changed the constructor to this.produto, where is this.valor?

  • Let’s go continue this discussion in chat.

  • page2 constructor is: this.products = this.navParams.get("value"); and at the click of page 1: querocomprar() { this.navCtrl.push(Conteudoprodutopage, { value: this.products }) }

  • I was doing some things wrong. But I did it already, thanks :D

Show 7 more comments

Browser other questions tagged database angularjs ionic sqlite apache-cordova

You are not signed in. Login or sign up in order to post.