Angular5 - 使用 *ngFor 构建表答案

【问题标题】：Angular5 - build Table with *ngForAngular5 - 使用 *ngFor 构建表
【发布时间】：2018-02-22 12:26:38
【问题描述】：

我想从 JSON 构建一个表

this.adjacencyData = [{
  'x1': [{'x1': '0', 'x2': '1'}],
  'x2': [{'x1': '1', 'x2': '0'}]
}];

对于我做的 tableHead：

for (let prop in this.adjacencyData) {      
  this.adjacencyDataKeys = Object.keys(this.adjacencyData[prop]);
}

在模板中：

<thead>
  <tr>
    <th *ngFor="let key of adjacencyDataKeys">{{ key }}</th>      
  </tr>
</thead>

这很好用..

但是我将如何创建 TableBody？我正在尝试我在网上找到的所有内容.. 但我仍然不知道：/

我尝试过：

for ( let _i = 0; _i < this.adjacencyDataKeys.length; _i++ ) {
  this.adjacencyDataVals = Object.values(this.adjacencyData[0][this.adjacencyDataKeys[_i]][0]);
}

在模板中：

<tbody>
   <tr *ngFor="let val of adjacencyDataVals"><td>{{val}}</td></tr>   
</tbody>

我得到输出：

<tbody _ngcontent-c8="">
 <tr _ngcontent-c8="" class="ng-star-inserted">
  <td _ngcontent-c8="">1</td>
 </tr>
 <tr _ngcontent-c8="" class="ng-star-inserted">
  <td _ngcontent-c8="">0</td>
 </tr>   
</tbody>

有人可以向我解释一下如何解决这个问题吗？

【问题讨论】：

标签： html-table angular5 ngfor

【解决方案1】：

在这个迭代器中使用另一个迭代器

`<tbody>
   <tr *ngFor="let vals of adjacencyDataVals">
         <td *ngFor="let val of vals">{{ val }}</td> 
    </tr>   
</tbody>

【讨论】：

嗨，谢谢你的建议.. 现在我似乎更进一步了.. 但现在我收到了一个错误消息 Cannot find a differ supporting object '1' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

【解决方案2】：

对于任何有同样问题的人..最终的解决方案是这个：

1) 定义一个数组

adjacencyDataVals = [];

2) 仅将值推送到此数组

for ( let _i = 0; _i < this.adjacencyDataKeys.length; _i++ ) {     
  this.adjacencyDataVals.push(Object.values(this.adjacencyData[0][this.adjacencyDataKeys[_i]][0]));        
}

3) 然后像Karthikeyan M V 写道：

<tbody>
 <tr *ngFor="let vals of adjacencyDataVals">
   <td *ngFor="let val of vals">{{ val }}</td> 
 </tr>
</tbody>

非常感谢Karthikeyan M V ;)

【讨论】：