本文參考鏈接:詳解Angular2 關(guān)于*ngFor 嵌套循環(huán)
目前已經(jīng)用ionic開發(fā)的同學(xué)大多都會(huì)遇到一個(gè)問(wèn)題,如何把一個(gè)數(shù)據(jù)集合按照預(yù)期展示在html頁(yè)面,本文以下會(huì)羅列 多層數(shù)據(jù)嵌套 如何 循環(huán)遍歷 并展示的問(wèn)題.
1.我們先羅列幾種格式的數(shù)據(jù):
// 1.數(shù)組 ->字典
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" },
];
// 2.數(shù)組 ->字典->數(shù)組
data2: Array<any> = [
{ num1: [
{ num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "21" },
{ num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "22" }] },
{ num2: [
{ num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "23" },
{ num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24" }] },
{ num3: [
{ num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "25" },
{ num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "26" }] }
];
// 3.數(shù)組 ->數(shù)組
data4: Array<any> = [
[
{ num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "21" },
{ num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "22" }] ,
[
{ num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "23" },
{ num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24" }] ,
[
{ num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "25" },
{ num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "26" }]
];
// 4.字典->數(shù)組->字典->數(shù)組 (頁(yè)面顯示的為這個(gè)數(shù)據(jù),四層嵌套)
data5 = {
'1':[ { num: [ "2017-04-12", "1231234", "1233", "21" ]},
{ num: [ "2017-04-12", "1231234", "1233", "22" ]}
] ,
'2': [
{ num: [ "2017-04-12", "1231234", "1233", "23" ]},
{ num: [ "2017-04-12", "1231234", "1233", "24" ]}
] ,
'3': [
{ num: [ "2017-04-12", "1231234", "1233", "25" ]},
{ num: [ "2017-04-12", "1231234", "1233", "26" ]}
]
}
// 5.字典->數(shù)組->字典
data6 = {
'1':[ {num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "21"},
{ num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "22"}
] ,
'2': [
{ num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "23"},
{num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"}
] ,
'3': [
{ num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "25"},
{ num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "26"}
]
}
2.給大家一一截圖了展示效果
![Uploading data2_827681.png . . .]
data2.png
data4.png
data5.png
data6.png
關(guān)鍵代碼
getKeys(item) {
return Object.keys(item);
}
html頁(yè)面代碼
<ion-header>
<ion-navbar>
<ion-title>
Contact
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<!--解析datas-->
<!--<ion-row *ngFor="let item of datas">
<ion-col *ngFor="let key of getKeys(item)">
{{item[key]}}
</ion-col>
</ion-row>-->
<!--解析data2-->
<!--<ion-col *ngFor="let item of data2">
<ion-col *ngFor="let key of getKeys(item)">
<ion-row *ngFor="let item2 of item[key]">{{ item2.returnNum }}</ion-row>
</ion-col>
</ion-col>-->
<!--解析data4-->
<!--<ion-row *ngFor="let item of data4">
<ion-col *ngFor="let item2 of item">
<ion-col *ngFor="let key of getKeys(item2)">{{item2[key]}}</ion-col>
</ion-col>
</ion-row>-->
<!--解析data5-->
<div *ngFor="let key of getKeys(data5)">
<ion-col *ngFor="let item of data5[key]">
<ion-col *ngFor="let key of getKeys(item)">
<ion-row *ngFor="let item2 of item[key]">{{ item2 }}</ion-row>
</ion-col>
</ion-col>
</div>
<!--解析data6-->
<!--<ion-row *ngFor="let key of getKeys(data6)">
<ion-col *ngFor="let item of data6[key]">
<ion-col *ngFor="let key of getKeys(item)"> {{ item[key] }}</ion-col>
</ion-col>
</ion-row>-->
</ion-content>
附: *ngFor 是 Angular的語(yǔ)法,想深究的同學(xué)可以參考Angular官網(wǎng),也可以參考此鏈接
這里給大家提供一個(gè)調(diào)試數(shù)據(jù)的小技巧,我們通常使用ionic開發(fā)都會(huì)使用一個(gè)http的插件
import { HTTP } from '@ionic-native/http'
//或者這個(gè)
import {Http} from '@angular/http';
在我們發(fā)送網(wǎng)絡(luò)請(qǐng)求的時(shí)候可能在瀏覽器上輸出不了請(qǐng)求到的數(shù)據(jù),這個(gè)時(shí)候我們通常會(huì)用模擬器來(lái)跑,這樣調(diào)試起來(lái)就非常麻煩了,現(xiàn)在我們可以這樣做,把數(shù)據(jù)摘出來(lái)(代碼如下),用本地?cái)?shù)據(jù)調(diào)試html,可以正常展示了再接上請(qǐng)求到的數(shù)據(jù) 整體跑一下,這樣可以節(jié)省不少調(diào)試時(shí)間.
如果其他同學(xué)關(guān)于調(diào)試數(shù)據(jù)還有更好的方法,歡迎@我,也歡迎大家加入QQ群 64903116 討論ionic開發(fā)中的各種問(wèn)題;
export class ISSConfig {
static loadData: any = {
"errCode": "000000",
"errDesc": "",
"svcFlowNo": "11730KNRDRAKCCA5",
"cliFlowNo": "111111",
"object": {
"pageRow": 0,
"startPage": 0,
"totalRow": 7,
"list": [
{
"date": "20170428",
"firstTime": "09:59:17",
"lastTime": "17:33:48",
"hour": 7,
"minute": 34,
"minute2": 454
},
{
"date": "20170430",
"firstTime": "17:33:48",
"lastTime": "17:33:48",
"hour": 0,
"minute": 0,
"minute2": 0
}
]
}
}
}
本文demo已經(jīng)上傳到github,有需要的請(qǐng)自行下載
(下載demo的同學(xué)請(qǐng)注意,此代碼是寫在Contact頁(yè)面的,不要找錯(cuò)了哦)
