我对在用于迭代对象时如何在 angular2 中获取对象的key和感到有些困惑。我知道在 Angular 1.x 中有类似的语法value``*ngFor
key
value``*ngFor
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中是否有任何内置管道可以做同样的事情?
key1
key2
*ngFor
与 最新版本的 Angular (v6.1.0) 一样 ,Angular 团队在 Angular 包的模块中添加了新的内置管道,名称与keyvalue管道相同,以帮助您遍历对象、映射和数组common。例如 -
keyvalue
common
<div *ngFor="let item of testObject | keyvalue"> Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b> </div>
要保持原始顺序,请使用keyvalue:onCompare, 并在组件中定义回调:
keyvalue:onCompare
// ... import {KeyValue} from '@angular/common'; @Component(/* ... */) export class MyComponent { private onCompare(_left: KeyValue<any, any>, _right: KeyValue<any, any>): number { return -1; } }
demo?file=src%2Fapp%2Fapp.component.ts)
在这里查看更多有用的信息 -
如果您使用的是 Angular v5 或更低版本,或者您想使用管道实现,请遵循此答案