Ngfor遍历map的方法

时间:2023-11-28 10:47:50

Ngfor可以遍历list和数组,但如果想遍历map,可以使用下面的方式

在TypeScript文件中:

let list = Object.keys(MyObject);

在html文件中:

*ngFor="let item of list"

例子

ts文件:

attachMap = {}; // 标的图片
attachMapKey = []; // 标的图片key ionViewDidEnter() {
this.getLoanAttachments();
} getLoanAttachments(){
const paramData = {
'loanId': this.loanId
};
this.productsService.getLoanAttachments(paramData).subscribe(data => {
if(data.success && data.code === '0001'){
// 这里赋值attachMap 和attachMapKey
this.attachMap = data.data.attachMap;
this.attachMapKey = Object.keys(data.data.attachMap);
}
})
}

html文件:

<div *ngFor="let attachKey of attachMapKey" >
<h4>{{ attachKey }}</h4>
<h4>{{ attachMap[attachKey] }}</h4>
</div>

先遍历attachMapKey,然后根据key获取值(attachMap[attachKey])。

参考:

https://*.com/questions/37046138/how-to-iterate-object-keys-using-ngfor