迭代对象并将其显示在表格 Angular 6 中

Posted 2023-03-05

【中文标题】迭代对象并将其显示在表格 Angular 6 中

【英文标题】：Iterate over object and display it in table Angular 6

【发布时间】：2019-08-08 23:05:38

【问题描述】：

我有一个看起来像这样的对象：

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，我会得到

错误：找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

我该如何解决这个问题？感谢您的时间！ Here is a working snippet

【参考方案1】：

您可以使用键值管道：

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

见https://stackblitz.com/edit/angular-e3rfxt

【讨论】：

我也试过了，但看看发生了什么：stackblitz.com/edit/angular-psgqdk我该如何解决这个问题？

其实我犯了一个错误，我不想这样显示元素。你能看看我的问题吗，我编辑了它。

最简单的方法是用行名切换列名：将“a”重命名为“0”，将“b”重命名为“1-3”，依此类推