对于如何在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中有任何内建的管道来做同样的事情吗?
ECMA 2017+解决方案
遵循一些其他答案的思想,您可以创建一个Pipe来从您的对象创建一个[key, value]数组,但是以一种更简单的方式,遵循新的方法object。在ECMA 2017中引入的条目。
Pipe
import { PipeTransform, Pipe } from '@angular/core';
/**
* Transform a literal object into array
*/
@Pipe({
name: 'forObject',
pure: true,
})
export class ForObjectPipe implements PipeTransform {
transform(object, args?: any): any {
return Object.entries(object);
}
}
模块
在模块中,声明并提供它
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ForObjectPipe } from './for-object.pipe';
import { MyPageRoutingModule } from './my-routing.module';
import { MyPage } from './my.page';
@NgModule({
imports: [
CommonModule,
MyPageRoutingModule,
],
declarations: [
MyPage,
ForObjectPipe,
],
providers: [
ForObjectPipe,
]
})
export class MyPageModule {}
然后你可以在你的组件中使用typescript代码或HTML。
组件中使用
// ...
import { ForObjectPipe } from './for-object.pipe';
@Component({
selector: 'app-my',
templateUrl: './my.page.html',
styleUrls: ['./my.page.scss'],
})
export class MyComponent {
obj: { [key: any]: any } = {
1: 'hello',
2: 'world',
};
constructor(private forObjectPipe: ForObjectPipe) { }
foo() {
const myArray = this.forObjectPipe.transform(this.obj);
// same as
const myArray = Object.entries(this.obj);
}
}
在组件视图中使用
<h1>Object:</h1>
<div *ngFor="let pair of obj | forObject">
KEY: {{ pair[0] }} - VALUE: {{ pair[1] }}
</div>
输出:
Object:
KEY: 1 - VALUE: hello
KEY: 2 - VALUE: world
现场演示:https://stackblitz.com/edit/angular-qapapx?file=src/app/hello.component.ts
像这样创建数组
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'
}
];
一直都有效
@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...
}