详解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之水平横向滚动歌词同步的应用
May 07 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
javascript实现获取服务器时间
May 19 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
Vue中$refs的用法详解
Jun 24 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 Javascript
原生javascript单例模式的应用实例分析
Feb 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
PHP简单选择排序算法实例
2015/01/26 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
Numpy数组的保存与读取方法
2018/04/04 Python
python list格式数据excel导出方法
2018/10/31 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
在python中用url_for构造URL的方法
2019/07/25 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
西安当代医院管理研究院笔试题
2015/12/11 面试题
物流管理专业职业生涯规划书
2014/01/06 职场文书
《荷花》教学反思
2014/04/16 职场文书
后勤个人工作总结
2015/02/28 职场文书
python process模块的使用简介
2021/05/14 Python
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫
MySQL去除密码登录告警的方法
2022/04/20 MySQL