详解Angular2 关于*ngFor 嵌套循环

更新时间：2017年05月22日 14:21:32 作者：huangenai

这篇文章主要介绍了详解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);
  }

结果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Angular2内置指令NgFor和NgIf详解

Angular 4中如何显示内容的CSS样式示例代码
这篇文章主要给大家介绍了关于Angular 4中如何显示内容的CSS样式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-11-11
Angular2 之路由与导航详细介绍
本篇文章主要介绍了Angular2 之路由与导航详细介绍，详细的介绍了路由的用法，具有一定的参考价值，有兴趣的可以了解一下
2017-05-05
angular4实现带搜索的下拉框
这篇文章主要为大家详细介绍了angular4实现带搜索的下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
浅谈angular2 组件的生命周期钩子
本篇文章主要介绍了浅谈angular2 组件的生命周期钩子，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
webapp框架AngularUI的demo改造之路
这篇文章主要介绍了webapp框架AngularUI的demo改造之路,需要的朋友可以参考下
2014-12-12
详解AngularJs ui-router 路由的简单介绍
本篇文章主要介绍了AngularJs ui-router 路由的简单介绍。简单明了的说明了ngRoute和ui-router的区别和用法，有兴趣的可以了解一下
2017-04-04
AngularJS中isolate scope的用法分析
这篇文章主要介绍了AngularJS中isolate scope的用法,结合实例形式分析了isolate scope的几种具体使用方式,需要的朋友可以参考下
2016-11-11
AngularJS Toaster使用详解
AngularJS Toaster是一个 AngularJS 提示框.基于angular v1.2.6 及以上和angular-animate.这篇文章主要介绍了AngularJS Toaster使用详解,需要的朋友可以参考下
2017-02-02
详细解读AngularJS中的表单验证编程
这篇文章主要介绍了详细解读AngularJS中的表单验证编程,AngularJS是一个非常热门的JavaScript库,需要的朋友可以参考下
2015-06-06
Angularjs中controller的三种写法分享
这篇文章给大家介绍了angularjs中controller的三种写法，每种写法都给出了示例代码，对大家理解和学习很有帮助，有需要的朋友们可以参考借鉴。
2016-09-09