如何在 HTML(ionic 3) 中显示数组元素

Question

我是 ionic 的新手。实际上，我试图在购物车页面中显示添加到购物车的产品。我从 Foreach 方法中获取了值，但是当我尝试显示时，它不会显示。

cartpage(){
  this.cart.cartview().then((result) => {
    this.cartdisplay = JSON.parse(JSON.stringify(result));
    this.categorydata = JSON.parse(JSON.stringify(this.cartdisplay.data));
    console.log('result11:'+JSON.stringify(this.categorydata));

     var arr = Object.keys(this.categorydata.items);

      //this.cartarray =[];

    arr.forEach( a =>{

      this.cartarray['orderitem_name']= this.categorydata.items[a].orderitem_name;
      this.cartarray['orderitem_quantity']= this.categorydata.items[a].orderitem_quantity;
      console.log('cart : '+this.cartarray['orderitem_quantity']);

      console.log(a) //item id
      console.log(this.categorydata.items[a].cart_id) //product id
    })
    console.log(this.cartarray);
  })
}

在控制台日志中显示orderitem_name和orderitem_quantity，但在HTML页面中没有显示。这是我的 HTML 代码：

<ion-card>
  <ion-card-header>Items</ion-card-header>
  <!--<ion-card-content >Your cart is empty!</ion-card-content>--> 
  <ion-list no-lines>
    <ion-item  *ngFor="let tms of cartarray;" >
      <ion-avatar item-left>
        <img src="">
      </ion-avatar>
      <h2><b>{{tms.orderitem_name}} x {{tms.orderitem_quantity}}</b></h2>
      <div [ngSwitch]="product?.price_discount">
        <p *ngSwitchCase="true">₹ <span st></span> <span></span></p>
        <p *ngSwitchDefault>₹ <span style="text-decoration: line-through;"></span> <span></span></p>
      </div>
      <div>
        <button primary large>
          <ion-icon name="add" (click)="increaseQuantity(i)"></ion-icon>
        </button>
        <button primary large>
          <ion-icon name="remove" (click)="decreaseQuantity(i)"></ion-icon>
        </button>
      </div>
    </ion-item>
  </ion-list>
  <!--<ion-card-content ><div>Total for this order is ₹ </div></ion-card-content>-->
</ion-card>

帮我在ionic 3的foreach循环中显示一个值

Answer 1

您在显示数据列表之前错过了 "tms" 变量名

<ion-item  *ngFor="let tms of cartarray;" >       
<h2><b>{{tms.orderitem_name}} x {{tms.orderitem_quantity}}</b></h2>        
</ion-item>

Answer 2

你应该像

一样调试你的数组

<ion-item  *ngFor="let tms of cartarray;" >       
<h2><b>{{tms | json }} x {{tms | json}}</b></h2>        
</ion-item>

谢谢

Answer 3

你可以试试这些

this.cart.cartview().then((result) => { 
  this.cartarray = Object.keys(result["data"]["items"]).map((key) => {
      return result["data"]["items"][key]; 
  });
})

还有你的 html 文件

<div *ngFor="let tms of cartarray;">
  <h2><b>{{tms.orderitem_name}} x {{tms.orderitem_quantity}}</b></h2>
</div>

我没有 ionic 所以这就是我用 div 进行测试的原因，但它工作正常。

如何在 HTML(ionic 3) 中显示数组元素

How to display a array elements in HTML(ionic 3)

html

typescript

ionic-framework

ionic3

angular