如何从 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);
    }