在项目开发中拿到的数据是这样的,要循环遍历出来。可是在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. Visual Studio 2017创建.net standard类库编译出错原因

    正式版上个月已经Release了,从那时到现在经常会收到更新提示,估计问题还不少吧!其中最吸引我的当然是.net standard与.net core. 刚好最近接触.net standard项目,新 ...

  2. 老李秘技:loadrunner11是否还支持dblib协议?

    老李秘技:loadrunner11是否还支持dblib协议?   Loadrunner11不再支持Sybase CTLIB 和 DBLIB协议 在loadrunner安装文件中找到*. LRP文件,位 ...

  3. Java基础学习(五)—Collection

    一.Collection概述 1.数组和集合的区别 (1)长度区别      数组长度是固定的,集合长度是可变的. (2)存储内容区别      数组只能存放同一种类型的元素(基本类型/引用类型). ...

  4. Git版本切换

    前面的话 本文将以一个简单实例的形式来介绍Git版本切换 初始版本 首先,在一个自定义的位置,创建目录a,比如在D盘下 [注意]本文会用到一些常用的Linux的Shell命令,详细信息移步至此 先使用 ...

  5. java nio(一)buffer

    概述 常见的网络io分为两种情况,BIO(block-io)和NIO(non-block-io),分别位于java.io和java.nio. BIO,是阻塞的io,采用一个线程处理一个连接的方式,就算 ...

  6. 【转载】google搜索从入门到精通

    原文地址:http://www.cnblogs.com/helloIT/articles/5095668.html /***************************************** ...

  7. CF #311 D. Vitaly and Cycle 加最少边形成奇圈

    题目链接:http://codeforces.com/problemset/problem/557/D 大意 给出一个未必联通的无向图(点数至少为3),问最少加多少边可以形成一个奇圈,以及这样做的方案 ...

  8. 少年,是时候换种更优雅的方式部署你的php代码了

    让我们来回忆下上次你是怎么发布你的代码的: 1. 先把线上的代码用ftp备份下来 2. 上传修改了的文件 3. 测试一下功能是否正常 4. 网站500了,赶紧用备份替换回去 5. 替换错了/替换漏了 ...

  9. 谈一下我们是如何开展code review的

    众所周知,代码审查是软件开发过程中十分重要的环节,楼主结合自己的实际工作经验,和大家分享一下在实际工作中代码审查是如何开展的, 笔者水平有限,若有错误和纰漏,还请大家指正. 代码审查的阻力 我想不通公 ...

  10. 通过 bootloader 向其传输启动参数

    作者:Younger Liu, 本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. Linux提供了一种通过bootloader向其传输启动参数的功能,内核开发 ...