对于如何在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获取对象的访问键和值
其他回答
你现在必须这样做，我知道不是很有效的，因为你不想转换你从firebase接收的对象。
this.af.database.list('/data/' + this.base64Email).subscribe(years => {
years.forEach(year => {
var localYears = [];
Object.keys(year).forEach(month => {
localYears.push(year[month])
});
year.months = localYears;
})
this.years = years;
});
有对象。在*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管道属性。在这种情况下，管道在每个更改检测周期中都被调用，即使输入引用没有更改(向对象添加属性时也是如此)。
你可以通过尝试获得动态对象的键
myObj['key']
您可以创建一个自定义管道来返回每个元素的键列表。 就像这样:
import { PipeTransform, Pipe } from '@angular/core';
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
transform(value, args:string[]) : any {
let keys = [];
for (let key in value) {
keys.push(key);
}
return keys;
}
}
像这样使用它:
<tr *ngFor="let c of content">
<td *ngFor="let key of c | keys">{{key}}: {{c[key]}}</td>
</tr>
Edit
你也可以返回一个包含键和值的条目:
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
transform(value, args:string[]) : any {
let keys = [];
for (let key in value) {
keys.push({key: key, value: value[key]});
}
return keys;
}
}
像这样使用它:
<span *ngFor="let entry of content | keys">
Key: {{entry.key}}, value: {{entry.value}}
</span>
