2

Parece ser algo simples de se pesquisar, mas não estou conseguindo. Eu gostaria de quando clicado em um item da lista, abrir uma nova página com as informações detalhadas desse item, vai ser as mesmas informações usadas na página inicial. Mas não sei como posso fazer isso. Criei uma página apenas, mas preciso receber o conteudo de cada item clicado nela. Lista de itens

Conteudo quando clicado

Fiz um botão e quando clico vai pra pagina, so preciso receber os dados lá. Não postei o código pq nao sei exatamente qual parte do codigo postar aqui, mas se alguem puder me ajudar e precisar, só me falar. Eu quero receber as mesmas informações na segunda página, porém do item selecionado. Obrigado!

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>

2

1 Resposta 1

3

Você pode passar como parâmetro na navegação entre páginas. Esse seria o código para chamar a página seguinte:

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

Na página aberta com os detalhes, você recebe o valor da navegação:

this.item = navParams.get('itemSelecionado');
12
  • Mas o que seria o " {itemSelecionado: item}" ?
    – Felipe XST
    Commented 19/08/2018 às 13:43
  • Seria o item selecionado do ngFor na primeira página, com a lista com todos os itens.
    – Renata
    Commented 19/08/2018 às 13:55
  • Não vi o clique no seu html, mas acredito que você esteja passando o produto como parâmetro. Você pode passar o produto total para a página seguinte, e não só o nome. Na ts page 1: this.navCtrl.push(ConteudoprodutoPage, {valor: produto} ). Na ts page 2, você recebe esse parâmetro que passou como o próprio produto e não como uma variável nova. this.produto = this.navParams.get("valor"); O this.produto é o que você usa no html da page 2.
    – Renata
    Commented 19/08/2018 às 15:02
  • Estou conseguindo receber os dados na outra página, mas tem como eu filtrar para receber apenas do item clicado? Ter tem, mas não sei se entendeu o que eu quis dizer. Sempre que clicar em um produto, mostrar apenas as informações dele.
    – Felipe XST
    Commented 20/08/2018 às 14:49
  • Sim, no html, inclua a função de clique na linha em que você informa o ngFor: <ion-item no-lines *ngFor="let produto of produtos" no-padding (click)="produtoSelecionado(produto)">. Nessa função produtoSelecionado(produto), chame a página seguinte, informando como parâmetro de navegação o produto que você recebeu, como eu informei anteriormente: this.navCtrl.push(ConteudoprodutoPage, {valor: produto} ).
    – Renata
    Commented 20/08/2018 às 15:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .