Angular2: about * ngFor nested loop, angular2ngfor

Angular2: about * ngFor nested loop, angular2ngfor

The data obtained in the project development should be traversed cyclically. However, in ng2, it seems that the Object cannot be traversed directly.

 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"}, ];

This method can be implemented after searching.

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> about ngfor nested loop </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>

This method is important.

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

Result:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.