zoukankan      html  css  js  c++  java
  • Angular基础之ngFor遍历对象数组获取key和value渲染页面的几种方法

    Angular的ngFor遍历对象数组的几种方法

    方法一

    ts文件:

    export class MyDemo {
      objectKeys = Object.keys;
      myObj = { 
         a: 'a',
         b: 'b'
      };
      constructor(){}
    }
    

    html文件:

    <div *ngFor="let key of objectKeys(myObj)">
        {{key}} : {{myObj[key]}}
    </div>
    

    方法二

    ts文件:

    export class MyDemo {
      myArr = []
      myObj = { 
         a: 'a',
         b: 'b'
      };
      constructor(){}
      ngOnInit() {
        this.addUniversalProperty();
      }
    addUniversalProperty() {
        Object.values(this.myObj).forEach((_: any) => {
          this.myArr.push(_);
        });
      }
    }
    

    html文件:

    <div *ngFor="let item of myformdata_arr">
     {{item}}
    </div>
    
  • 相关阅读:
    SQL学习指南第三篇
    SQL学习指南第二篇
    Rebuilding Roads
    TOJ4244: Sum
    K-th Number
    【模板】后缀数组
    冰水挑战
    旅途
    Monkey and Banana
    Max Sum Plus Plus
  • 原文地址:https://www.cnblogs.com/sugartang/p/13393190.html
Copyright © 2011-2022 走看看