详解Angular2 关于*ngFor 嵌套循环

2019-11-19 16:31:38

字体：大中小

来源：转载

供稿：网友

在项目开发中拿到的数据是这样的，要循环遍历出来。可是在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"}, ];

在搜索之后发现了这种方法可以实现。

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 嵌套循环</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);  }

结果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：vue+axios实现登录拦截的实例代码

下一篇：bootstrap模态框远程示例代码分享

学习交流

索泰发布一款GTX 1070 Mini迷你版本:小机

索泰发布一款GTX 1070 Mini迷你版本:小机箱大爱...

热门图片

猜你喜欢的新闻

猜你喜欢的关注