详解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 函数声明与函数表达式的区别介绍
Oct 05 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
JavaScript表单验证实现代码
May 22 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 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
C# Assembly类访问程序集信息
2009/06/13 PHP
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
8个PHP数组面试题
2015/06/23 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
Javascript base64编码实现代码
2011/12/02 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
python使用Berkeley DB数据库实例
2014/09/26 Python
Python标准库之循环器(itertools)介绍
2014/11/25 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
Python iter()函数用法实例分析
2018/03/17 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
python实现kmp算法的实例代码
2019/04/03 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
合作意向书
2014/07/30 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
电影雨中的树观后感
2015/06/15 职场文书
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android