代码之家 › 专栏 › 技术社区 › Mka24

Angular5-使用*ngFor构建表格

ngfor angular5 html-table

Mka24 · 技术社区 · 7 年前

我想从JSON构建一个表

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

对于桌面,我会:

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>

这很好用。。

但是我该如何创建表体呢?我正在尝试我在网上找到的所有东西。。但我仍然不知道:/

我试图做到:

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>

I获取为输出:

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

有人能告诉我怎么解决这个问题吗?

2 回复 | 直到 7 年前

WorkaroundNewbie azharuddin irfani 7 年前

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

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

Mka24 7 年前

对于任何有同样问题的人。。最终的解决方案是:

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

推荐文章

JennyToy · 如何向ngfor中的元素添加id以及在ngfor中有条件地创建元素

6 年前

PatS · 在Angular中,*ngFor=“let item from list | async”是什么意思?

6 年前

Robin · 使用方法调用而不是ngFor指令的属性时的无限负载

7 年前

Mka24 · Angular5-使用*ngFor构建表格

7 年前

FrankTheTank · ngFor内部无可见内容

7 年前

Gargoyle · *角度5中<tr>元素上的ngFor和*ngIf

7 年前

match · 将ngFor变量传递给ngIf模板

7 年前

louisvno · 使用ngFor更改阵列后未更新DOM

7 年前

Christophe Loeys · 根据API调用的数据,在Angular2中动态创建组件

7 年前

ste92 · 从Web服务器填充ngFor表时出错

7 年前