詳解Angular2 關于*ngFor 嵌套循環(huán)

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

這篇文章主要介紹了詳解Angular2 關于*ngFor 嵌套循環(huán)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在項目開發(fā)中拿到的數(shù)據(jù)是這樣的，要循環(huán)遍歷出來。可是在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"},
 ];

在搜索之后發(fā)現(xiàn)了這種方法可以實現(xiàn)。

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 嵌套循環(huán)</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);
  }

結(jié)果：

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Angular2內(nèi)置指令NgFor和NgIf詳解

AngularJS ng-blur 指令詳解及簡單實例
本文主要介紹AngularJS ng-blur 指令，這里對ng-blur 指令的知識詳細介紹給大家，并給大家一個實例作為參考，有需要的小伙伴可以參考下
2016-07-07
三種AngularJS中獲取數(shù)據(jù)源的方式
這篇文章主要介紹了三種AngularJS中獲取數(shù)據(jù)源的方式,需要的朋友可以參考下
2016-02-02
AngularJS使用ng-repeat遍歷二維數(shù)組元素的方法詳解
這篇文章主要介紹了AngularJS使用ng-repeat遍歷二維數(shù)組元素的方法,結(jié)合實例形式分析了AngularJS二維數(shù)組元素遍歷的相關操作技巧,需要的朋友可以參考下
2017-11-11
利用Jasmine對Angular進行單元測試的方法詳解
單元測試是一種能夠幫助開發(fā)者驗證代碼中某一部分有效性的技術。下面這篇文章主要給大家介紹了關于利用Jasmine對Angular進行單元測試的相關資料，文中介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-06-06
AngualrJS中每次$http請求時的一個遮罩層Directive
AngularJS是一款非常強大的前端MVC框架。接下來通過本文給大家介紹AngualrJS中每次$http請求時的一個遮罩層Directive，本文非常具有參考借鑒價值，特此分享供大家學習
2016-01-01
Angular 容器部署的方法
這篇文章主要介紹了Angular 容器部署的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
Ionic + Angular.js實現(xiàn)圖片輪播的方法示例
圖片輪播在我們?nèi)粘ｉ_發(fā)中是再熟悉不過的了，下面這篇文章主要給大家介紹了Ionic + Angular實現(xiàn)圖片輪播的方法，文中給出了詳細的示例代碼供大家參考學習，需要的朋友們下面來一起看看吧。
2017-05-05
簡介AngularJS的視圖功能應用
這篇文章主要介紹了AngularJS的視圖功能應用,包括ng-view和ng-template以及$routeProvider的使用，以及 $routeProvider 需要的朋友可以參考下
2015-06-06
angularjs中ng-bind-html的用法總結(jié)
這篇文章主要介紹了angularjs中ng-bind-html的用法總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
基于AngularJS實現(xiàn)表單驗證功能
這篇文章主要為大家詳細介紹了基于AngularJS實現(xiàn)表單驗證功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07