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

Chloe2020-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中是否有用于执行相同操作的内置管道？

小胖Gil2020/05/25 14:14:46

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

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 14:14:46

使用索引：

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

用法：

{{key}} -> {{value}}

神乐2020/05/25 14:14:46

与最新版本的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或更低版本，或者您想使用管道来实现，请遵循以下答案

使用ngfor访问对象的键和值

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer