对于如何在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中有任何内建的管道来做同样的事情吗?
当前回答
如果你已经在使用Lodash，你可以使用这个简单的方法，包括键和值:
<ul>
<li *ngFor='let key of _.keys(demo)'>{{key}}: {{demo[key]}}</li>
</ul>
在typescript文件中，包括:
import * as _ from 'lodash';
在导出的组件中，包括:
_: any = _;
其他回答
我想为Angular 8添加一个答案:
对于循环，你可以做:
<ng-container *ngFor="let item of BATCH_FILE_HEADERS | keyvalue: keepOriginalOrder">
<th nxHeaderCell>{{'upload.bulk.headings.'+item.key |translate}}</th>
</ng-container>
同样，如果你需要上面的数组来保持原始的顺序，那么在你的类中声明这个:
public keepOriginalOrder = (a, b) => a.key;
有对象。在*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 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;
}
}
这里没有一个答案对我有用，下面是对我有用的:
创建管道/钥匙。有内容的Ts:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform
{
transform(value:any, args:string[]): any {
let keys:any[] = [];
for (let key in value) {
keys.push({key: key, value: value[key]});
}
return keys;
}
}
添加到app.module.ts(你的主模块):
import { KeysPipe } from './pipes/keys';
然后向模块声明数组中添加如下内容:
@NgModule({
declarations: [
KeysPipe
]
})
export class AppModule {}
然后在你的视图模板中，你可以使用这样的东西:
<option *ngFor="let entry of (myData | keys)" value="{{ entry.key }}">{{ entry.value }}</option>
如果你想读更多，这里是我找到的一个很好的参考资料。
你现在必须这样做，我知道不是很有效的，因为你不想转换你从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;
});
