2016-12-05 8 views
0

OK angezeigt, ich habe dieseein Objekt in angular2

{ "calledCust": { "no": 270, "yes": 9 }, "hasOpened": { "no": 254, "yes": 25 } } 

und ich habe dies versucht, in der Ansicht angezeigt werden soll.

<ul *ngFor="let profile of profiles.counts"> 
    <li> 
    {{profile | json}} 
    </li> 
</ul> 

weil es kein json Array ist, Winkel bläst gerade oben mit

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. 

und ich möchte wirklich, wie unten die Ergebnisse anzuzeigen.

  • calledCust YES: 9
  • hasOpened JA: 25

Vielen Dank

EDIT

hier ist die volle json

{ 
    total_rows: 279, 
    bookmark: "g2wAAAABaANkAB5kYmNvcmVAZGI0LnBvcnRlci5jbG91ZGFudC5uZXRsAAAAAmEAYj____9qaAJGQAnZi4AAAABiAAAB7mo", 
    rows: [], 
    counts: { 
     calledCust: { 
      no: 270, 
      yes: 9 
     }, 
     hasOpened: { 
      no: 254, 
      yes: 25 
     } 
    } 
} 
+0

Was ist "zählt" Prop innerhalb Objekt? –

+0

@PankajParkar Ich habe die Frage bearbeitet, danke :) – Jason

Antwort

0

Sie müssen nur wandeln Sie es um zu einer JSON-Array, so etwas wie:

let key; // var key for old JavaScript ES5 
let arr = []; 

key = 'calledCust'; 
arr[0] = obj[key]; 
arr[0].key = key; 

key = 'hasOpened'; 
arr[1] = obj[key]; 
arr[1].key = key; 

wären leicht, ein Rohr zu schaffen, die Ihr Objekt nehmen und es in einem JSON-Array verdeckte dann würden Sie gerade tun:

<ul *ngFor="let profile of profiles.counts | convertObjToJsonArray"> 

Sie laufen können über die Eigenschaften eines Objekts, um diese Lösung generischer zu machen.

Verwandte Themen