• Angular2 关于*ngFor 嵌套循环


    在项目开发中拿到的数据是这样的,要循环遍历出来。可是在ng2中好像不能直接遍历Object

      datas: any = [
        { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"},
        { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"},
        { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"},
        { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"},
        { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"},
        { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"},
        { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"},
      ];

    在搜索之后发现了这种方法可以实现。

    array-ngfor.ts

    import { Component } from '@angular/core';
    
    @Component({
      selector: 'page-array-ngfor',
      templateUrl: 'array-ngfor.html',
    })
    export class ArrayNgfor {
    
      constructor() { }
    
      datas: Array<any> = [
        { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24" },
        { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24" },
        { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24" },
        { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24" },
        { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24" },
        { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24" },
        { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24" },
      ];
    
      getKeys(item) {
        return Object.keys(item);
      }
    }


    array-ngfor.html

    <ion-header>
      <ion-navbar>
        <ion-title>关于ngfor 嵌套循环</ion-title>
      </ion-navbar>
    </ion-header>
    
    <ion-content>
      <ion-row *ngFor="let item of datas">
        <ion-col *ngFor="let key of getKeys(item)"> {{ item[key] }}</ion-col>
      </ion-row>
    </ion-content>

    重点的是这个方法

      getKeys(item){
            return Object.keys(item);
        }

     结果:

    参考于:

    https://segmentfault.com/q/1010000005727687

    http://stackoverflow.com/questions/40451269/typescript-sort-generic-array

  • 相关阅读:
    算法二:选择排序
    算法一:冒泡算法
    windows+nginx+fcgi配置
    shell if判断的种类
    lua闭包的理解函数与表的几种表达方法
    bash: jps:未找到命令
    解决 jmeter 在非GUI模式下生成的jtl,导入到结果树,看不到请求、返回的信息
    centos 解决python3.7 安装时No module named _ssl
    dbms复习(二)
    dbms复习(一)
  • 原文地址:https://www.cnblogs.com/huangenai/p/6888666.html
Copyright © 2020-2023  润新知