如何从 Ionic 3 中的多级对象中检索数据?

Question

此页面的工作方式如下。用户选择一种产品(C2，可口可乐等(，然后应该显示来自不同超市的价格。这是我创建的对象。

productPrices = [
{
name: "C2 Green Tea",
prices: [
{
smPrice: 19.15,
tsPrice: 19.25,
rbPrice: 19.10
}
],
stock: 50
},
{
name: "Coca Cola",
prices: [
{
smPrice: 21.50,
tsPrice: 21.45,
rbPrice: 24.50
}
],
stock: 50
},
{
name: "Nature's Spring",
prices: [
{
smPrice: 12.50,
tsPrice: 11.50,
rbPrice: 13.00
}
],
stock: 50
},
{
name: "Red Horse Beer",
prices: [
{
smPrice: 31.50,
tsPrice: 29.50,
rbPrice: 30.90
}
],
stock: 50
},
];
getProductPrice(product: string){
return this.productPrices.filter(item => item.name == product);
}

通过使用getProducPrice()方法，我能够选择产品及其属性。但我无法获得价格的价值。我在模板页面上拥有的是这个。

<div *ngFor="let itemPrice of productPrices">
<div *ngFor="let marketPrice of itemPrice.prices">
<form (ngSubmit)="onFormSubmit(userForm)" #userForm="ngForm" >
<ion-list>
<ion-list-header>
Supermarkets
</ion-list-header>
<ion-item>
<ion-thumbnail item-start>
<img src="assets/grocery/market-logo/ts.jpg">
</ion-thumbnail>
<p>{{marketPrice.tsPrice}}</p>
<button ion-button clear item-end (click)="onBuy()" >Buy</button>
</ion-item>
<ion-item>
<ion-thumbnail item-start>
<img src="assets/grocery/market-logo/sm.png">
</ion-thumbnail>
<p>{{marketPrice.smPrice}}</p>
<button ion-button clear item-end (click)="onBuy()"> Buy</button>
</ion-item>
<ion-item>
<ion-thumbnail item-start>
<img src="assets/grocery/market-logo/rb.jpg">
</ion-thumbnail>
&#8369;<input name="price" value="{{marketPrice.rbPrice}}">
<p>{{marketPrice.rbPrice}}</p> 
<button ion-button clear item-end (click)="onBuy()">Buy</button>
</ion-item>
<ion-item>
<ion-label>Enter Quantity</ion-label>
<ion-input type="number" min="0"></ion-input>
</ion-item>
</ion-list>
</form>  
</div>
</div>

问题是，如果我使用表格提交，它将提交所有值，包括其他超市的价格。 有没有更好的方法让我从我收到的对象循环并访问每个产品的价格值？我没有使用数据库，也没有将该文件保存在 json 文件中。我只想知道是否有更好的方法通过使用某些方法在打字稿文件中获取值。谢谢。

Answer 1

试试这个，你将选择产品的属性

<div *ngFor="let item of productPrices"> 
<button (click) ="getProductPrice(item)">get</button>
</div>

在您的 ts 文件中

getProductPrice(product: any){
console.log(product);
}