angular - 使用 json 响应生成动态列表

Question

我有一个像下面这样的 json 数组；

"collectings": [
    {
      "hint": "OPEN",
      "amount": 24
    },
    {
      "hint": "CREDIT CARD",
      "amount": 347
    },
    {
      "hint": "CASH",
      "amount": 256.5
    }
  ]

现在，我想在列表中动态显示这些数据，我正在尝试按照以下方式进行；

<ion-content>
<div class="row" *ngIf="collectings && collectings.length > 0">
  <ion-list>
    <ion-list-header>Comedy</ion-list-header>
    <ion-item *ngFor="let collecting of collectings">{{collectings}}</ion-item>
  </ion-list>
</div>
</ion-content>

但是，它在页面上显示如下图； 如何正确显示？

Answer 1

代替 {{ collections }}(数组)

<ion-item *ngFor="let collecting of collectings">{{collectings}}</ion-item>

您应该打印 collecting 属性(没有结尾的 s)并使用 hint 或 amount 子属性，如下所示:

 <ion-item *ngFor="let collecting of collectings">
   {{collecting.hint}} - {{ collecting.amount }}
 </ion-item>