Erstellen einer dynamischen Liste mit JSON-Antwort

Question

Ich habe ein JSON-Array wie folgt;

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

Jetzt möchte ich diese Daten auf einer Liste dynamisch anzeigen, ich versuche es wie folgt zu tun;

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

aber es wird auf der Seite wie dem folgenden Bild angezeigt; Wie kann ich es richtig anzeigen?

Answer 1

Statt {{ collectings }} (das ist der Array)

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

Sie die collecting Eigenschaft gedruckt werden soll (ohne die Endung s) und verwenden Sie die hint oder amount Untereigenschaften wie folgt aus:

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