使用\* ngFor访问对象的键和值

角度的 TypeScript

Chloe

2020-05-25

对于在迭代对象时如何在angular2中获取key和value的对象，我有些困惑*ngFor。我知道在angular 1.x中有一种语法

ng-repeat="(key, value) in demo"

但是我不知道如何在angular2中做同样的事情。我尝试过类似的尝试，但没有成功：

<ul>
  <li *ngFor='#key of demo'>{{key}}</li>
</ul>

demo = {
    'key1': [{'key11':'value11'}, {'key12':'value12'}],
    'key2': [{'key21':'value21'}, {'key22':'value22'}],
  }

这是我尝试的plnkr：http ://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview

如何获得key1和key2动态使用*ngFor？经过广泛搜索之后，我发现了使用管道的想法，但是我不知道该怎么做。在angular2中是否有用于执行相同操作的内置管道？

第4171篇《使用\* ngFor访问对象的键和值》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
小胖Gil 2020.05.25

将演示类型更改为数组或遍历对象并推送到另一个数组

public details =[];   
Object.keys(demo).forEach(key => {
      this.details.push({"key":key,"value":demo[key]);
    });

和从HTML： 

<div *ngFor="obj of details">
  <p>{{obj.key}}</p>
  <p>{{obj.value}}</p>
  <p></p>
</div>
Tom凯 2020.05.25

使用索引：

<div *ngFor="let value of Objects; index as key">

用法：

{{key}} -> {{value}}
神乐 2020.05.25

与最新版本的Angular（v6.1.0）一样，Angular Team添加了新的内置管道，其名称与keyvaluepipe 相同，可帮助您在commonangular软件包的模块中遍历对象，地图和数组。例如 -

<div *ngFor="let item of testObject | keyvalue">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

工作分叉的例子

在这里查看更多有用的信息-

如果您使用的是Angular v5或更低版本，或者您想使用管道来实现，请遵循以下答案

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android