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

posted @   huangenai  阅读(16936)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
点击右上角即可分享
微信分享提示