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

  • 相关阅读:
    闲置安卓设备搭建Linux服务器实现外网访问
    Flume笔记
    动态规划算法助记
    Hexo 添加Live2D看板娘
    Oracle 助记
    搭建Discuz论坛
    逆向工程(助记)
    PL/SQL Developer连接本地Oracle 11g 64位数据库
    NSOperation的基础
    GCD基础
  • 原文地址:https://www.cnblogs.com/huangenai/p/6888666.html
Copyright © 2011-2022 走看看