对于如何在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中有任何内建的管道来做同样的事情吗?
当前回答
有对象。在*ngFor中使用它。
@Component({
selector: 'app-myview',
template: `<div *ngFor="let key of objectKeys(items)">{{key + ' : ' + items[key]}}</div>`
})
export class MyComponent {
objectKeys = Object.keys;
items = { keyOne: 'value 1', keyTwo: 'value 2', keyThree: 'value 3' };
constructor(){}
}
其他回答
我认为是客体。钥匙是这个问题的最佳解决方案。对于任何遇到这个答案并试图找出为什么Object的人。Keys给他们['0'，'1']而不是['key1'， 'key2']，这是一个警示性的故事-注意“of”和“in”之间的区别:
我已经在使用Object了。键，类似于这个:
interface demo {
key: string;
value: string;
}
createDemo(mydemo: any): Array<demo> {
const tempdemo: Array<demo> = [];
// Caution: use "of" and not "in"
for (const key of Object.keys(mydemo)) {
tempdemo.push(
{ key: key, value: mydemo[key]}
);
}
return tempdemo;
}
然而，与其
for (const key OF Object.keys(mydemo)) {
我无意中写了
for (const key IN Object.keys(mydemo)) {
哪个“工作”完全正常，没有任何错误并返回
[{key: '0', value: undefined}, {key: '1', value: undefined}]
这花了我2个小时在谷歌上搜索和咒骂。
(打了额头上)
有对象。在*ngFor中使用它。
@Component({
selector: 'app-myview',
template: `<div *ngFor="let key of objectKeys(items)">{{key + ' : ' + items[key]}}</div>`
})
export class MyComponent {
objectKeys = Object.keys;
items = { keyOne: 'value 1', keyTwo: 'value 2', keyThree: 'value 3' };
constructor(){}
}
在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管道属性。在这种情况下，管道在每个更改检测周期中都被调用，即使输入引用没有更改(向对象添加属性时也是如此)。
谢谢管道，但我必须做一些改变之前，我可以在angular 2 RC5使用它。更改了管道导入行，并在键数组初始化中添加了any类型。
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
transform(value) {
let keys:any = [];
for (let key in value) {
keys.push( {key: key, value: value[key]} );
}
return keys;
}
}
更新
在6.1.0-beta.1KeyValuePipe是https://github.com/angular/angular/pull/24319引入的
<div *ngFor="let item of {'b': 1, 'a': 1} | keyvalue">
{{ item.key }} - {{ item.value }}
</div>
砰砰作响的例子
之前的版本
另一种方法是创建NgForIn指令，如下所示:
<div *ngFor="let key in obj">
<b>{{ key }}</b>: {{ obj[key] }}
</div>
砰砰作响的例子
ngforin.directive.ts
@Directive({
selector: '[ngFor][ngForIn]'
})
export class NgForIn<T> extends NgForOf<T> implements OnChanges {
@Input() ngForIn: any;
ngOnChanges(changes: NgForInChanges): void {
if (changes.ngForIn) {
this.ngForOf = Object.keys(this.ngForIn) as Array<any>;
const change = changes.ngForIn;
const currentValue = Object.keys(change.currentValue);
const previousValue = change.previousValue ? Object.keys(change.previousValue) : undefined;
changes.ngForOf = new SimpleChange(previousValue, currentValue, change.firstChange);
super.ngOnChanges(changes);
}
}
}
