对于如何在angular2中使用*ngFor迭代对象时获取对象的键和值,我有点困惑。我知道角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'}],
}
以下是我的尝试:
http://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview
如何使用*ngFor动态获取key1和key2 ?经过广泛的搜索,我发现了使用管道的想法,但我不知道如何去做。
在angar2中有任何内建的管道来做同样的事情吗?
和Angular的最新版本(v6.1.0)一样,Angular团队在Angular package的公共模块中添加了与keyvalue管道同名的内置管道,以帮助你迭代对象、映射和数组。
例如:
<div *ngFor="let item of testObject | keyvalue">
Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>
要保持原来的顺序,使用keyvalue:onCompare,
在组件中定义回调:
// ...
import {KeyValue} from '@angular/common';
@Component(/* ... */)
export class MyComponent {
private onCompare(_left: KeyValue<any, any>, _right: KeyValue<any, any>): number {
return -1;
}
}
工作分叉示例
点击这里查看更多有用的信息
https://github.com/angular/angular/blob/master/CHANGELOG.md#features-3
https://github.com/angular/angular/commit/2b49bf7
如果你使用的是Angular v5或更低版本,或者你想使用管道实现,请遵循这个答案
使用ngfor获取对象的访问键和值
在Angular 6.1中,你可以使用keyvalue管道:
<div *ngFor="let item of testObject | keyvalue">
Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>
但是它有一个不方便的地方,就是根据键值对结果列表进行排序。
如果你需要中性的东西:
@Pipe({ name: 'keyValueUnsorted', pure: false })
export class KeyValuePipe implements PipeTransform {
transform(input: any): any {
let keys = [];
for (let key in input) {
if (input.hasOwnProperty(key)) {
keys.push({ key: key, value: input[key]});
}
}
return keys;
}
}
不要忘记指定pure:false管道属性。在这种情况下,管道在每个更改检测周期中都被调用,即使输入引用没有更改(向对象添加属性时也是如此)。
在其他优秀的管道中,有一个非常好的库可以做到这一点。它叫做ngx管道。
例如,keys管道返回对象的键,values管道返回对象的值:
钥匙管
<div *ngFor="let key of {foo: 1, bar: 2} | keys">{{key}}</div>
<!-- Output: 'foo' and 'bar -->
价值管
<div *ngFor="let value of {foo: 1, bar: 2} | values">{{value}}</div>
<!-- Output: 1 and 2 -->
不需要创建自己的自定义管道:)