詳解Angular2 關于*ngFor 嵌套循環(huán)
更新時間：2017年05月22日 14:21:32 作者：huangenai
這篇文章主要介紹了詳解Angular2 關于*ngFor 嵌套循環(huán)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在項目開發(fā)中拿到的數(shù)據(jù)是這樣的，要循環(huán)遍歷出來?？墒窃趎g2中好像不能直接遍歷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);
}
結果：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
本文主要介紹AngularJS ng-blur 指令，這里對ng-blur 指令的知識詳細介紹給大家，并給大家一個實例作為參考，有需要的小伙伴可以參考下2016-07-07
這篇文章主要介紹了三種AngularJS中獲取數(shù)據(jù)源的方式,需要的朋友可以參考下2016-02-02
AngularJS使用ng-repeat遍歷二維數(shù)組元素的方法詳解
這篇文章主要介紹了AngularJS使用ng-repeat遍歷二維數(shù)組元素的方法,結合實例形式分析了AngularJS二維數(shù)組元素遍歷的相關操作技巧,需要的朋友可以參考下2017-11-11
單元測試是一種能夠幫助開發(fā)者驗證代碼中某一部分有效性的技術。下面這篇文章主要給大家介紹了關于利用Jasmine對Angular進行單元測試的相關資料，文中介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-06-06
AngualrJS中每次$http請求時的一個遮罩層Directive
AngularJS是一款非常強大的前端MVC框架。接下來通過本文給大家介紹AngualrJS中每次$http請求時的一個遮罩層Directive，本文非常具有參考借鑒價值，特此分享供大家學習2016-01-01
這篇文章主要介紹了Angular 容器部署的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
Ionic + Angular.js實現(xiàn)圖片輪播的方法示例
圖片輪播在我們日常開發(fā)中是再熟悉不過的了，下面這篇文章主要給大家介紹了Ionic + Angular實現(xiàn)圖片輪播的方法，文中給出了詳細的示例代碼供大家參考學習，需要的朋友們下面來一起看看吧。2017-05-05
這篇文章主要介紹了AngularJS的視圖功能應用,包括ng-view和ng-template以及$routeProvider的使用，以及 $routeProvider 需要的朋友可以參考下2015-06-06
這篇文章主要介紹了angularjs中ng-bind-html的用法總結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要為大家詳細介紹了基于AngularJS實現(xiàn)表單驗證功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07