对于如何在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中有任何内建的管道来做同样的事情吗?
当前回答
你可以通过尝试获得动态对象的键
myObj['key']
其他回答
我想为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;
使用指数:
<div *ngFor="let value of Objects; index as key">
用法:
{{key}} -> {{value}}
有对象。在*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(){}
}
你可以通过尝试获得动态对象的键
myObj['key']
@Marton对接受的答案有一个重要的反对意见，理由是管道在每次更改检测时都会创建一个新的集合。相反，我将创建一个HtmlService，它提供了一系列实用函数，视图可以使用如下:
@Component({
selector: 'app-myview',
template: `<div *ngFor="let i of html.keys(items)">{{i + ' : ' + items[i]}}</div>`
})
export class MyComponent {
items = {keyOne: 'value 1', keyTwo: 'value 2', keyThree: 'value 3'};
constructor(private html: HtmlService){}
}
@Injectable()
export class HtmlService {
keys(object: {}) {
return Object.keys(object);
}
// ... other useful methods not available inside html, like isObject(), isArray(), findInArray(), and others...
}
