Vertikale Tabelle mit dynamischen Daten

Question

scheint die gleiche Anforderung zu sein wie AngularJS "Vertical" ng-repeat aber Lösung funktioniert nicht für * ngFor

Ich habe diesen object array, dass ich in eine HTML-Tabelle zu binden versuchen. Das Format ist so etwas wie unten:

[ 
{ 
    "Animal":"Dog", 
    "Country":"France", 
    "Food":"Tofu", 
    "Car":"Nano", 
    "Language":"TypeScript" 
} 
] 

Jetzt können diese einfach in die Standard-HTML-horizontalen Tisch Art und Weise wie diese formatiert werden:

<table> 
    <tr> 
    <th>Animal</th> 
    <th>Country</th> 
    <th>Food</th> 
    <th>Car</th> 
    <th>Language</th> 
    </tr> 
    <tr *ngFor="let data of datas"> 
    <td>{{data.Animal}}</td> 
    <td>{{data.Country}}</td> 
    <td>{{data.Food}}</td> 
    <td>{{data.Car}}</td> 
    <td>{{data.Language}}</td> 
    </tr> 
</table> 

Diese Tabelle würde erstellen wie unter (Bitte ignorieren Sie die Daten in der Tisch, es ist nur eine Idee zu geben.):

Aber wie würde ich eine Struktur wie diese mit dynamischen Daten (Art eines vertikalen erstellen Tabelle):

Answer 1

In Komponente:

this.arrayOfKeys = Object.keys(this.datas[0]); 

html:

<table> 
    <tr *ngFor="let key of arrayOfKeys"> 
     <th>{{key}}</th> 
     <td *ngFor="let data of datas"> 
      {{data[key]}} 
     </td> 
    </tr> 
</table> 

Answer 2

Verwenden ng-container wenn Sie Datenstruktur groups[].items[].name

So ähnlich haben, wollen, wenn Sie Zeile hinzufügen

<table> 
    <ng-container *ngFor="let group of groups"> 
     <tr> 
      <td>{{group.name}}</td> 
     </tr> 
     <tr *ngFor="let item of group.items"> 
      <td>{{item.name}}</td> 
     </tr> 
    </ng-container> 
</table> 

Quelle: https://stackoverflow.com/a/44086855/1840185