angular - Genererar dynamisk lista med json-svar

Jag har en json-array som följande;

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

Nu vill jag visa dessa data på en lista dynamiskt, jag försöker göra det på följande sätt;

<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>

men det visas på sidan som på bilden nedan;

Hur kan jag visa det på rätt sätt?

Svar #1

Istället för {{ collectings }} (som är arrayen)

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

du bör skriva ut collecting-egenskapen (utan det avslutande s:et) och använda hint eller amount underegenskaper på detta sätt:

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

Relaterade artiklar