详解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 相关文章推荐
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 Javascript
小程序开发之模态框组件封装
Apr 23 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
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
再谈JavaScript线程
2015/07/10 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
py中的目录与文件判别代码
2008/07/16 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
将python图片转为二进制文本的实例
2019/01/24 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
python队列原理及实现方法示例
2019/11/27 Python
python如何处理程序无法打开
2020/06/16 Python
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
2015年志愿者服务工作总结
2015/04/20 职场文书
docker-compose部署Yapi的方法
2022/04/08 Servers