详解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版本的代码
Sep 03 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
关于URL中的特殊符号使用介绍
Nov 03 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 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
PHP微信开发之查询微信精选文章
2016/06/23 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
Javascript 事件流和事件绑定
2009/07/16 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
python批量制作雷达图的实现方法
2016/07/26 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
Python 3 判断2个字典相同
2019/08/06 Python
python解释器spython使用及原理解析
2019/08/24 Python
python梯度下降算法的实现
2020/02/24 Python
超级实用的8个Python列表技巧
2020/08/24 Python
经理管理专业自荐信范文
2013/12/31 职场文书
会计专业毕业生求职信分享
2014/01/03 职场文书
车贷收入证明范本
2014/01/09 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
营销学习心得体会
2014/09/12 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
2014年接待工作总结
2014/11/26 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers