在项目开发中拿到的数据是这样的,要循环遍历出来。可是在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

Angular2 关于*ngFor 嵌套循环的更多相关文章

  1. angular2的ngfor ngif指令嵌套

    angular2的ngfor ngif指令嵌套 ng2 结构指令不能直接嵌套使用,可使用<ng-container>标签来包裹指令 示例如下: <ul> <ng-cont ...

  2. angular2 ngfor循环

    angular2 在组件模板中可以循环数组集合等对象,语法非常简单,如: <ng-container *ngFor="let item of model.list"> ...

  3. Angular2 内置指令 NgFor 和 NgIf 详解

    http://www.jb51.net/article/89781.htm 在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个 ...

  4. Angular2 *ngFor把数据显示在多个input中出错解决方法

    点击添加按钮会自动添加一个空的input组 html <div class="form-inline"> <label class="form-cont ...

  5. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  6. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  7. Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  8. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

  9. Angular2入门系列教程3-多个组件,主从关系

    上一篇 Angular2项目初体验-编写自己的第一个组件 好了,前面简单介绍了Angular2的基本开发,并且写了一个非常简单的组件,这篇文章我们将要学会编写多个组件并且有主从关系 现在,假设我们要做 ...

随机推荐

  1. [SinGuLaRiTy] 平衡树

    [SinGuLaRiTy-1009] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 二叉查找树 二叉查找树是指具有下列性质的非空二叉树: ⑴ ...

  2. 老李分享:Web Services 架构 1

    老李分享:Web Services 架构   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9 ...

  3. GitLab 客户端添加SSH KEY

    一.生成公钥 先查看系统用户目录下是否有 .ssh 文件夹,如果有的话,那说明你之前已经生成过公钥,则可以跳过生成公钥. 运行下面的命令生成一个密钥: ssh-keygen -t rsa -C &qu ...

  4. wireshark filter manualpage

    NAME wireshark-filter - Wireshark filter syntax and reference SYNOPSIS wireshark [other options] [ - ...

  5. 图的基本算法(BFS和DFS)(转载)

    图是一种灵活的数据结构,一般作为一种模型用来定义对象之间的关系或联系.对象由顶点(V)表示,而对象之间的关系或者关联则通过图的边(E)来表示. 图可以分为有向图和无向图,一般用G=(V,E)来表示图. ...

  6. sublime text3 在ubutun下的下载和配置

    最近在学习 Javascript,在 w3c school 上把教程看完了,也算个刚刚入门的水平,一直都是在 win 系统 上练习. 但是因为写 python 代码的 pycharm 和 git 配置 ...

  7. nodejs将JSON字符串转化为JSON对象

    如何将JSON字符串转化为JSON对象? JSON.parse(str)       JSON是javascript的一个内置对象,提供了转换JSON对象与字符串互相转换的方法: 问题来了,道理我都懂 ...

  8. kvc模式详解

    java利用反射机制访问类的 私有变量.OC的KVC模式也是一样,用来访问私有变量用的. 用字符串去访问对象实例变量的机制. //KVC模式-(void)KVCtest{ [_dm valueForK ...

  9. lua 运算符

    lua 运算符 算术运算符 操作符 描述 + 加 - 减 * 乘 / 除 % 求模 ^ 求幂 示例程序 local a, b = 1, 2 print(a + b) print(a - b) prin ...

  10. 【转】JDBC学习笔记(3)——复习和练习

    转自:http://www.cnblogs.com/ysw-go/ 复习部分 一.获取数据库连接 1)方式一 1 // 获取数据库连接 2 @Test 3 public void testGetCon ...