仅从另一页上的选定项目接收数据

Question

我希望当我单击列表中的任何项目时，仅在新页面上显示该项目的数据。我已经可以显示从第 1 页到第 2 页的项目，但我无法过滤。有人可以帮助我吗？

网页 p1

<ion-segment-button value="Todosgastronomia" class="todos-button" 
(click)="selecionaprodutoscategoria(1)">
Todos
</ion-segment-button>

<ion-list *ngSwitchCase="'Todosgastronomia'">
<ion-item no-lines *ngFor="let produto of 
produtos(click)="querocomprar()" no-padding>
<ion-thumbnail item-start>
<img src="assets/imgs/mmsszjm.png" class="imgast">
</ion-thumbnail>
<ion-row class="rowclass">
<h3 class="nomproduto"> {{produto.nom_produto}} </h3>
<h3 class="nomsubcategoria">{{produto.nom_subcategoria}} </h3>
<h3 class="descproduto"> {{produto.desc_produto}} </h3>
<h3 class="descdesconto"> {{produto.desc_desconto}}</h3>
<h3 class="valproduto">
<font color="#179c90">R$</font> {{produto.val_produto}}
</h3>
<button ion-button small end class="favproduto">
<ion-icon name="icon-ico_favoritos"></ion-icon>
</button>
<button ion-button class="querotodos">QUERO! 
</button>
</ion-row>
</ion-item>
</ion-list>

TS p1

export class HomePage implements OnInit {
videoOptions: VideoOptions;
videoUrl: string;
public regioes: Regiao[];
produtos: Produto[];
querocomprar(produto: number) {
this.navCtrl.push(ConteudoprodutoPage, {
val: this.produtos
})

}

TS p2

export class ConteudoprodutoPage {
produto: Produto;
constructor(private payPal: PayPal, public navCtrl: NavController, public 
navParams: NavParams) {
this.produto = navParams.get("valor");
}

Answer 1

在你的ion-item只需将produto作为参数传递

<ion-item no-lines *ngFor="let produto of produtos" (click)="querocomprar(produto)" no-padding>

在主页上的querocomprar()方法上，获取产品项

querocomprar(produto: any) {
this.navCtrl.push(ConteudoprodutoPage, {'val': produto})
}

接收ConteudoprodutoPage类上的val参数数据

constructor(private payPal: PayPal, public navCtrl: NavController, public navParams: NavParams) {
this.produto = navParams.get("val");
}