ionic3 关于*ngFor 嵌套多层循环的用法详解

本文参考链接:详解Angular2 关于*ngFor 嵌套循环

目前已经用ionic开发的同学大多都会遇到一个问题,如何把一个数据集合按照预期展示在html页面,本文以下会罗列 多层数据嵌套 如何 循环遍历 并展示的问题.

1.我们先罗列几种格式的数据:

 // 1.数组 ->字典
   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.数组 ->字典->数组
   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.数组 ->数组
    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.字典->数组->字典->数组  (页面显示的为这个数据,四层嵌套)
 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.字典->数组->字典
  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.给大家一一截图了展示效果

关键代码

 getKeys(item) {
  return Object.keys(item);
 }

html页面代码

<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的语法,想深究的同学可以参考Angular官网,也可以参考此链接

这里给大家提供一个调试数据的小技巧,我们通常使用ionic开发都会使用一个http的插件

import { HTTP } from '@ionic-native/http'
//或者这个
import {Http} from '@angular/http';

在我们发送网络请求的时候可能在浏览器上输出不了请求到的数据,这个时候我们通常会用模拟器来跑,这样调试起来就非常麻烦了,现在我们可以这样做,把数据摘出来(代码如下),用本地数据调试html,可以正常展示了再接上请求到的数据 整体跑一下,这样可以节省不少调试时间.

如果其他同学关于调试数据还有更好的方法,欢迎@我,也欢迎大家加入QQ群 64903116 讨论ionic开发中的各种问题;

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已经上传到github,有需要的请自行下载
(下载demo的同学请注意,此代码是写在Contact页面的,不要找错了哦)