Ngfor遍历map的方法

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://stackoverflow.com/questions/37046138/how-to-iterate-object-keys-using-ngfor

原文地址:https://www.cnblogs.com/Jason-Xiang/p/9440670.html