遍历对象并将其显示在 table Angular 6
Iterate over object and display it in table Angular 6
我有一个看起来像这样的对象:
obj = {'a': [0, 0, 1, 0], 'b': [1, 0, 0, 1], 'c': [0, 0, 0, 0], 'd': [1, 1, 1, 0]}
而且我想在 table 中显示它,如下所示:
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
,我得到
Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
我该如何解决这个问题?感谢您的时间! Here is a working snippet
您可以使用键值管道:
<div *ngFor="let item of object | keyvalue">
{{item.key}}:{{item.value}}
</div>
文档:https://angular.io/api/common/KeyValuePipe
(适用于 Angular 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>
我有一个看起来像这样的对象:
obj = {'a': [0, 0, 1, 0], 'b': [1, 0, 0, 1], 'c': [0, 0, 0, 0], 'd': [1, 1, 1, 0]}
而且我想在 table 中显示它,如下所示:
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
,我得到
Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
我该如何解决这个问题?感谢您的时间! Here is a working snippet
您可以使用键值管道:
<div *ngFor="let item of object | keyvalue">
{{item.key}}:{{item.value}}
</div>
文档:https://angular.io/api/common/KeyValuePipe
(适用于 Angular 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>