对于如何在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中有任何内建的管道来做同样的事情吗?
您可以创建一个自定义管道来返回每个元素的键列表。
就像这样:
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>
举例阐述@Thierry的回答。
没有内置的管道或方法来从*ngFor循环中获取键和值。因此我们必须为相同的对象创建自定义管道。就像thierry说的,这是代码的答案。
管道类实现了PipeTransform接口的transform方法,该方法接受一个输入值和一个可选的参数字符串数组,并返回转换后的值。
transform方法对于管道来说是必不可少的。PipeTransform接口定义了该方法,并指导工具和编译器。它是可选的;不管怎样,Angular都会寻找并执行transform方法。
有关管道的更多信息请参考这里
import {Component, Pipe, PipeTransform} from 'angular2/core';
import {CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common';
@Component({
selector: 'my-app',
templateUrl: 'mytemplate.html',
directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],
pipes: [KeysPipe]
})
export class AppComponent {
demo = {
'key1': 'ANGULAR 2',
'key2': 'Pardeep',
'key3': 'Jain',
}
}
@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;
}
}
HTML部分为:
<ul>
<li *ngFor='#key of demo | keys'>
Key: {{key.key}}, value: {{key.value}}
</li>
</ul>
Working Plnkr http://plnkr.co/edit/50LlK0k6OnMnkc2kNHM2?p=preview
更新RC
正如user6123723(谢谢)在评论中的建议,这里是更新。
<ul>
<li *ngFor='let key of demo | keys'>
Key: {{key.key}}, value: {{key.value}}
</li>
</ul>
这里没有一个答案对我有用,下面是对我有用的:
创建管道/钥匙。有内容的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>
如果你想读更多,这里是我找到的一个很好的参考资料。
像这样创建数组
tags = [
{
name : 'Aliko Dogara',
amount : '60,000',
purpose: 'Office repairs'
},
{
name : 'Aliko Dogara',
amount : '60,000',
purpose: 'Office repairs'
},
{
name : 'Aliko Dogara',
amount : '60,000',
purpose: 'Office repairs'
},
{
name : 'Aliko Dogara',
amount : '60,000',
purpose: 'Office repairs'
},
{
name : 'Aliko Dogara',
amount : '60,000',
purpose: 'Office repairs'
}
];
一直都有效
在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管道属性。在这种情况下,管道在每个更改检测周期中都被调用,即使输入引用没有更改(向对象添加属性时也是如此)。