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文件中。我只是想知道是否有更好的方法通过使用某些方法获取typescript文件中的值。谢谢。

Answer 1

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

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

在你的ts文件中

flex-direction: row-reverse

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

1 个答案: