我有一个像这样的物体:
obj = {'a': [0, 0, 1, 0], 'b': [1, 0, 0, 1], 'c': [0, 0, 0, 0], 'd': [1, 1, 1, 0]}
我想把它显示在这样的桌子上:
No | a | b | c | d
0 | 0 | 1 | 0 | 1
1-3 | 0 | 0 | 0 | 1
4-6 | 1 | 0 | 0 | 1
7-9 | 0 | 1 | 0 | 0
//a //b //c //d
我如何使用ngFor
来完成这个任务?
这是我的html
<table>
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">a</th>
<th scope="col">b</th>
<th scope="col">c</th>
<th scope="col">d</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td></td>
</tr>
<tr>
<td>1-3</td>
<td></td>
</tr>
<tr>
<td>4-6</td>
<td></td>
</tr>
<tr>
<td>6-9</td>
<td></td>
</tr>
</tbody>
<table>
如果我试图在obj
上迭代,我会得到
错误:找不到“对象”类型不同的支持对象“对象对象”。NgFor只支持绑定到诸如数组之类的Iterable。
我怎么才能解决这个问题?谢谢你抽出时间!这里有一个工作片段
发布于 2019-03-18 14:36:46
您可以使用keyvalue管道:
<div *ngFor="let item of object | keyvalue">
{{item.key}}:{{item.value}}
</div>
博士:https://angular.io/api/common/KeyValuePipe
(为角6.1+工作)
编辑:
可以将对象更改为:
obj = {'0': [0, 0, 1, 0], '1-3': [1, 0, 0, 1], '4-6': [0, 0, 0, 0], '6-9': [1, 1, 1, 0]}
然后在html中:
<tbody>
<tr *ngFor="let x of obj | keyvalue">
<td>{{x.key}}</td>
<td *ngFor="let data of x.value">{{data}}</td>
</tr>
</tbody>
https://stackoverflow.com/questions/55223751
复制相似问题