[英]How to iterate object keys using *ngFor?
我一直在挖掘,發現我可以使用以下內容在對象上使用 *ngFor :
<div *ngFor="#obj of objs | ObjNgFor">...</div>
其中ObjNgFor
管道是:
@Pipe({ name: 'ObjNgFor', pure: false })
export class ObjNgFor implements PipeTransform {
transform(value: any, args: any[] = null): any {
return Object.keys(value).map(key => value[key]);
}
}
但是,當我有這樣的對象時:
{
"propertyA":{
"description":"this is the propertyA",
"default":"sth"
},
"propertyB":{
"description":"this is the propertyB",
"default":"sth"
}
}
我不太確定如何提取“propertyA”和“propertyB”,以便可以從 *ngFor 指令訪問它。 有什么想法嗎?
更新
我想要做的是呈現以下 HTML:
<div *ngFor="#obj of objs | ObjNgFor" class="parameters-container">
<div class="parameter-desc">
{{SOMETHING}}:{{obj.description}}
</div>
</div>
某些東西將等於propertyA
和propertyB
(這是對象的結構方式)。 所以,這將導致:
propertyA:this is the propertyA
propertyB:this is the propertyB
在6.1.0-beta.1 KeyValuePipe
中引入https://github.com/angular/angular/pull/24319
<div *ngFor="let item of {'b': 1, 'a': 1} | keyvalue">
{{ item.key }} - {{ item.value }}
</div>
上一版本
你可以試試這樣的
export class ObjNgFor implements PipeTransform {
transform(value: any, args: any[] = null): any {
return Object.keys(value).map(key => Object.assign({ key }, value[key]));
}
}
然后在你的模板上
<div *ngFor="let obj of objs | ObjNgFor">
{{obj.key}} - {{obj.description}}
</div>
或者不創建管道並將對象傳遞給 *ngFor,只需將Object.keys(MyObject)
傳遞給 *ngFor。 它返回與管道相同的結果,但沒有麻煩。
在打字稿文件上:
let list = Object.keys(MyObject); // good old javascript on the rescue
在模板(html)上:
*ngFor="let item of list"
只需從管道返回鍵而不是值,然后使用鍵訪問值:
(在 beta.17 中let
而不是#
)
@Pipe({ name: 'ObjNgFor', pure: false })
export class ObjNgFor implements PipeTransform {
transform(value: any, args: any[] = null): any {
return Object.keys(value)//.map(key => value[key]);
}
}
@Component({
selector: 'my-app',
pipes: [ObjNgFor],
template: `
<h1>Hello</h1>
<div *ngFor="let key of objs | ObjNgFor">{{key}}:{{objs[key].description}}</div> `,
})
export class AppComponent {
objs = {
"propertyA":{
"description":"this is the propertyA",
"default":"sth"
},
"propertyB":{
"description":"this is the propertyB",
"default":"sth"
}
};
}
鍵.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'keys' })
export class KeysPipe implements PipeTransform {
transform(obj: Object, args: any[] = null): any {
let array = [];
Object.keys(obj).forEach(key => {
array.push({
value: obj[key],
key: key
});
});
return array;
}
}
app.module.ts
import { KeysPipe } from './keys.pipe';
@NgModule({
declarations: [
...
KeysPipe
]
})
示例.component.html
<elem *ngFor="let item of obj | keys" id="{{ item.key }}">
{{ item.value }}
</elem>
沒有使用管道這個例子
*ngFor="let Value bof Values; let i = index"
{{i}}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.