架构师_程序员

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 337|回复: 0

[Angular] Angular2 关于*ngFor 嵌套循环

[复制链接]
跳转到指定楼层
楼主
发表于 2019-5-31 14:47:47
zu
在项目开发中拿到的数据是这样的,要循环遍历出来。可是在ng2中好像不能直接遍历Object

  1. datas: any = [
  2.     { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"},
  3.     { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"},
  4.     { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"},
  5.     { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"},
  6.     { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"},
  7.     { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"},
  8.     { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"},
  9.   ];
复制代码
在搜索之后发现了这种方法可以实现。

array-ngfor.ts


  1. import { Component } from '@angular/core';

  2. @Component({
  3.   selector: 'page-array-ngfor',
  4.   templateUrl: 'array-ngfor.html',
  5. })
  6. export class ArrayNgfor {

  7.   constructor() { }

  8.   datas: Array<any> = [
  9.     { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24" },
  10.     { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24" },
  11.     { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24" },
  12.     { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24" },
  13.     { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24" },
  14.     { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24" },
  15.     { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24" },
  16.   ];

  17.   getKeys(item) {
  18.     return Object.keys(item);
  19.   }
  20. }
复制代码
array-ngfor.html

  1. <ion-header>
  2.   <ion-navbar>
  3.     <ion-title>关于ngfor 嵌套循环</ion-title>
  4.   </ion-navbar>
  5. </ion-header>

  6. <ion-content>
  7.   <ion-row *ngFor="let item of datas">
  8.     <ion-col *ngFor="let key of getKeys(item)"> {{ item[key] }}</ion-col>
  9.   </ion-row>
  10. </ion-content>
复制代码
重点的是这个方法

  1. getKeys(item){
  2.         return Object.keys(item);
  3.     }
复制代码
结果:






上一篇:VS 和 VS Code回到上一次点击位置
下一篇:discuz登录成功后的页面问题
帖子永久地址: 

架构师_程序员 - 论坛版权1、本主题所有言论和图片纯属会员个人意见,与本论坛立场无关
2、本站所有主题由该帖子作者发表,该帖子作者与架构师_程序员享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和架构师_程序员的同意
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
7、架构师_程序员管理员和版主有权不事先通知发贴者而删除本文

码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

Mail To:help@itsvse.com

QQ|Archiver|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2019-9-18 08:48

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表