垂直表與動態數據

似乎像AngularJS "Vertical" ng-repeat相同的需求，但解決方案並不爲* ngFor垂直表與動態數據

工作，我有這個object array，我試圖綁定到一個HTML表。它的格式是類似下面的東西：

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

現在，這可以簡單地在默認HTML水平表的方式類似這樣的格式：

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

這將創建表像下面（請忽略該數據表;它只是給一個想法）：

但我怎麼才能創建一個結構類似這樣的動態數據（一種垂直的表）：

來源

2017-05-25 Aakash Thakur

也許谷歌「的角度垂直表」我看到很多次 – mplungjan

[AngularJS 「垂直」 NG-REPEAT]（可能的重複https://stackoverflow.com/questions/34308094/angularjs -vertical-ng-repeat） – Avitus

@Avitus看上去完全是我的要求。但不適用於Angular 2'ngFor'。引發錯誤。 –

在組件：

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>

來源

2017-05-25 20:05:12

謝謝你!!!!! –

使用'ng-container'背後的具體原因是什麼？ –

不，ngFor在tr上也會這樣做。我將編輯。 –

使用ng-container，如果你有類似groups[].items[].name

所以數據結構，如果你想添加的行

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

來源：https://stackoverflow.com/a/44086855/1840185

來源

2017-11-20 19:14:21

垂直表與動態數據

回答

相關問題