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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM