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