zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    FTP Protocol
    File Operations
    Ubuntu Install Chinese Input Method
    Vim Intro
    ISA Introduction
    Fourier Transform
    Process/Thread Synchronization
    Process Synchronization-Example 2
    leetcode 栈和队列类型题
    leetcode 字符串类型题
  • 原文地址:https://www.cnblogs.com/Jason-Xiang/p/9440670.html
Copyright © 2011-2022 走看看