对于如何在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中有任何内建的管道来做同样的事情吗?
当前回答
你可以使用keyvalue管道作为示例代码提供:
<div style="flex-direction: column">
<app-cart-item
class="cart-item"
*ngFor="let keyValuePair of this.allProductRecords | keyvalue"
[productRecord]="keyValuePair.value"
(removeProduct)="removeProductFromCart(keyValuePair.key)"
></app-cart-item>
<br />
<p style="font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: bolder">
Total ${{ getTotalPurchaseAmount() }}
</p>
</div>
其他回答
和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获取对象的访问键和值
有对象。在*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(){}
}
这里有一个简单的解决方案
你可以为此使用typescript迭代器
import {Component} from 'angular2/core';
declare var Symbol;
@Component({
selector: 'my-app',
template:`<div>
<h4>Iterating an Object using Typescript Symbol</h4><br>
Object is : <p>{{obj | json}}</p>
</div>
============================<br>
Iterated object params are:
<div *ngFor="#o of obj">
{{o}}
</div>
`
})
export class AppComponent {
public obj: any = {
"type1": ["A1", "A2", "A3","A4"],
"type2": ["B1"],
"type3": ["C1"],
"type4": ["D1","D2"]
};
constructor() {
this.obj[Symbol.iterator] = () => {
let i =0;
return {
next: () => {
i++;
return {
done: i > 4?true:false,
value: this.obj['type'+i]
}
}
}
};
}
}
http://plnkr.co/edit/GpmX8g?p=info
你可以使用keyvalue管道作为示例代码提供:
<div style="flex-direction: column">
<app-cart-item
class="cart-item"
*ngFor="let keyValuePair of this.allProductRecords | keyvalue"
[productRecord]="keyValuePair.value"
(removeProduct)="removeProductFromCart(keyValuePair.key)"
></app-cart-item>
<br />
<p style="font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: bolder">
Total ${{ getTotalPurchaseAmount() }}
</p>
</div>
我认为是客体。钥匙是这个问题的最佳解决方案。对于任何遇到这个答案并试图找出为什么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个小时在谷歌上搜索和咒骂。
(打了额头上)
