首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >遍历对象并在表角6中显示它

遍历对象并在表角6中显示它
EN

Stack Overflow用户
提问于 2019-03-18 14:32:33
回答 1查看 4.1K关注 0票数 3

我有一个像这样的物体:

代码语言:javascript
运行
复制
obj = {'a': [0, 0, 1, 0], 'b': [1, 0, 0, 1], 'c': [0, 0, 0, 0], 'd': [1, 1, 1, 0]}

我想把它显示在这样的桌子上:

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
<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。

我怎么才能解决这个问题?谢谢你抽出时间!这里有一个工作片段

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-03-18 14:36:46

您可以使用keyvalue管道:

代码语言:javascript
运行
复制
<div *ngFor="let item of object | keyvalue">
 {{item.key}}:{{item.value}}
</div>

博士:https://angular.io/api/common/KeyValuePipe

(为角6.1+工作)

编辑:

可以将对象更改为:

代码语言:javascript
运行
复制
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中:

代码语言:javascript
运行
复制
<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

票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55223751

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档