如何在HTML中显示数组元素（ionic 3）

我是爱奥尼亚的新手。实际上，我正在尝试在购物车页面中显示添加到购物车的产品。我从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_名称和orderitem_数量，但它不会显示在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>

项目
{{tms.orderitem_name}}x{{tms.orderitem_quantity}
₹  

₹  

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

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

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

{{tms.orderitem_name}}x{{tms.orderitem_quantity}

您应该像

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

{{tms | json}}x{{tms | json}

谢谢你可以试试这些

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>

{{tms.orderitem_name}}x{{tms.orderitem_quantity}

---

我不知道“不”

ionic

，这就是为什么我要用div进行测试，但它的工作很好。

添加后也不会显示@Umesh JPLESE共享“cartarray”结果json“items”：{“29.2.2.0.YTowOnt9”：{“j2store_orderitem_id”：null，“order_id”：null，“orderitem_type”：“normal”，“cart_id”：“59”，“cartitem_id”：“29”，“product_id”：“2”}，“30.5.0.YTowOnt9”：{“j2store_orderitem_id”：null，“orderitem_类型”：“正常”、“购物车id:“59”、“购物车项目id:“30”、“产品id:“5”}“cartarray”结果是对象而不是对象数组。*n对于所需的对象数组，请单击“我”以显示对象数组