ListView项目显示为[object object]数组中的数组

时间:2019-07-16 10:34:57

标签: angular typescript listview object nativescript

我对自己的代码有疑问。我有这个JSON:

购物车

[
  {
    "_id": "5d2c9123fc70b57e44ec7924",
    "userid": "11E76234942299FCC13FFA163EDC2079",
    "dateCreated": "2019-07-15T14:43:47.282Z",
    "deleted": 0,
    "purchased": 0,
    "products": [
      {
        "productID": "2",
        "price": "100",
        "quantiy": "3"
      },
      {
        "productID": "3",
        "price": "100",
        "quantiy": "1"
      },
      {
        "productID": "14",
        "price": "100",
        "quantiy": "1"
      }
    ]
  }
]

我正在从此函数获取JSON:

getcart() {
  this.ws.getCart().subscribe(
    cart => {
      this.cart = cart;
      console.log('cart', cart)
    },
    err => console.error('error', err),
    () => console.log('error')
  );
}

现在,我想在视图中显示products,为此,我用html编写了这段代码:

<ListView row="1" class="list-group" [items]="cart" style="height:1250px">
    <ng-template let-shop="item">
        <FlexboxLayout flexDirection="row" class="list-group-item">
            <StackLayout height="100%">
                <Label [text]="shop._id"></Label>
                <Label [text]="shop.userid"></Label>
                <Label [text]="shop?.products"></Label>
            </StackLayout>
        </FlexboxLayout>
    </ng-template>
</ListView>

我得到的观点:

  

image

2 个答案:

答案 0 :(得分:2)

Products也是一个数组,您需要对其进行迭代。尝试类似

<Label *ngFor="let product of shop.products" [text]="[product.id, product.userid, product.quantity].join()"></Label>

答案 1 :(得分:0)

尝试以下操作:-

 <ListView [items]="items" class="list-group">
    <ng-template let-shop="item" let-i="index">
        <FlexboxLayout flexDirection="row" class="list-group-item">
            <StackLayout orientation="horizontal">
                <Label [text]="shop._id" marginRight="5" style="color:red"></Label>
                <Label text="->" style="color:#000000"></Label>
                <Label *ngFor="let product of shop.products" textWrap="true" text="{{ product.productID +'\n'+ product.price +'\n'+ product.quantiy }}"></Label>
            </StackLayout>
        </FlexboxLayout>
    </ng-template>
</ListView>