2017-01-24 8 views
0

enter image description here Hallo ich über folgende Array mit angular2Iterieren über Array in angular2

let list = [{"-1" : [{a : 1, b: 2, c: 2}, {a:3, b: 4, c: 2}]}, 
      {"0" : [{a : 12, b: 32, c: 22}, {a:31, b: 24, c: 32}}] 

iterieren will und zeigen die in einer Tabelle Format ausgegeben, wie im Bild gezeigt

mir bitte helfen, die bei der Lösung Problem.

folgenden Code ich habe

versucht
<table > 
<thead> 
    <tr> 
    <th > a </th> 
    <th > b </th> 
    <th > c </th> 
    </tr> 
</thead> 
<tbody > 
    <tr *ngFor="let element of list"> 
      <td> {{element['-1'].a}}</td> 
      <td> {{element['-1'].b}}</td> 
      <td> {{element['-1'].c}}</td> 
    </tr> 
</tbody> 
</table> 

Aber ich bin nicht in der Lage, die Zeile „-1“, „0“

+0

Willkommen SO, überprüfen Sie bitte, wie Sie eine Frage stellen: http://stackoverflow.com/help/how-to-ask Was haben Sie versucht, und wo hast du versagt? – Alex

+0

@ dfsq es ist ein Tippfehler bitte überprüfen Sie jetzt. – Vaibhav

+0

ist ein Array innerhalb eines Arrays. Sie durchlaufen nur einmal. – raj

Antwort

1

Es ist besser, zu addieren, wenn Sie Daten ein wenig neu formatiert:

let list = [ 
    {"-1" : [{a : 1, b: 2, c: 2}, {a:3, b: 4, c: 2}]}, 
    {"0" : [{a : 12, b: 32, c: 22}, {a:31, b: 24, c: 32}} 
] 

this.list = list.map(item => { 
    const keys = Object.keys(item) 
    return { 
    header: keys[0], 
    data: item[keys[0]] 
    } 
}) 

Dann müssen Sie es mit zwei Schleifen rendern. Vielleicht so:

<table> 
    <thead> 
    <tr> 
     <th>a</th> 
     <th>b</th> 
     <th>c</th> 
    </tr> 
    </thead> 
    <template ngFor let-item [ngForOf]="list"> 
    <tbody> 
     <tr class="header"> 
     <td colspan="3">{{ item.header }}</td> 
     </tr> 
     <tr *ngFor="let row of item.data"> 
     <td>{{ row.a }}</td> 
     <td>{{ row.b }}</td> 
     <td>{{ row.c }}</td> 
     </tr> 
    </tbody> 
    </template> 
</table> 

Demo:http://plnkr.co/edit/OgqArJLfdugFNvngRa23?p=preview

+0

Danke für die Lösung, es hilft viel +1. – Vaibhav