详解Angular2 关于*ngFor 嵌套循环


Posted in Javascript onMay 22, 2017

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

结果:

详解Angular2 关于*ngFor 嵌套循环

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS取文本框中最小值的简单实例
Nov 29 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
vue.js input框之间赋值方法
Aug 24 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
vue.js封装switch开关组件的操作
Oct 26 Javascript
bootstrap模态框远程示例代码分享
May 22 #Javascript
bootstrap手风琴折叠示例代码分享
May 22 #Javascript
移动端手指放大缩小插件与js源码
May 22 #Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 #jQuery
详解Angular路由 ng-route和ui-router的区别
May 22 #Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 #Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 #Javascript
You might like
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
python中map()与zip()操作方法
2016/02/27 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
简单谈谈Python中的闭包
2016/11/30 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
Python常用外部指令执行代码实例
2020/11/05 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
校园报刊亭的创业计划书
2014/01/02 职场文书
计算机学生求职信范文
2014/01/30 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
体育委员竞选稿
2015/11/21 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python