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

发布时间：2020-12-17 10:24:15 所属栏目：安全来源：网络整理

导读：我有一个json数组如下; "collectings": [ { "hint": "OPEN","amount": 24 },{ "hint": "CREDIT CARD","amount": 347 },{ "hint": "CASH","amount": 256.5 } ] 现在,我想动态地在列表上显示这些数据,我试着像下面这样做; ion-contentdiv class="row" *ngIf="c

我有一个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>

但是,它显示在页面上,如下图所示;

如何正确显示？

而不是{{collectings}}(这是数组)

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

你应该打印收集属性(没有结束s)并使用提示或数量子属性,如下所示：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!