详解Angular2 关于*ngFor 嵌套循环
时间:2019-03-30
本文章向大家介绍详解Angular2 关于*ngFor 嵌套循环,主要包括详解Angular2 关于*ngFor 嵌套循环使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在项目开发中拿到的数据是这样的,要循环遍历出来。可是在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); }
结果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- MacBook快速入门
- JMeter快速入门
- Git快速入门
- 施工现场的机器人会不会逃跑?
- 不用@微信官方了,Python20行自动戴帽!
- BAT人工智能生态时局图:全面战争爆发前夜
- AI博弈论:DeepMind让智能体在非对称博弈中找纳什均衡
- 斯坦福吴恩达团队公布最大医学影像数据集
- Rokid祝明铭:大腿我们不抱,人机交互产品形态未定 | 变局者
- 腾讯AI让二子,柯洁还是输了
- AI创业者的“英雄联盟”,腾讯AI加速器二期项目招募开启
- PyTorch发布一周年:盘点社区和工程大事件,后来者居上态势已显?
- 2018年AI如何发展?普华永道做出了8点预测 | 报告下载
- 不正之风!机器学习论文里都有哪四大投机取巧的写作手法?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux下安装maven3.6.2遇到的问题
- Unity3D网络通讯(五)--Socket通讯之Udp通讯
- IP不能作为rocketmq 的topic
- Unity3D网络通讯(六)-- UnityWebRequest实现WebService通讯
- Java Maven编译时没问题,运行时报java.lang.NoSuchMethodError
- 树莓派基础实验34:L298N模块驱动直流电机实验
- The consumer group[PushConsumer] has been created before, specify another name please
- 虚拟机系列 | JVM特点,基础结构与执行周期
- 报错 解决-bash: fork: retry: Resource temporarily unavailable
- 结构与算法(04):排序规则与查找算法
- 手把手教你在 TKE 集群中实现简单的蓝绿发布和灰度发布
- 虚拟机系列 | JVM类加载机制
- 树莓派综合项目2:智能小车(一)四轮驱动
- java 字节流入门(内存数组流->文件流)
- 视频高速上云网关/网络穿透EasyNTS智能组网服务平台ini配置文件丢失如何处理?