详解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实现拼音排序的方法
Nov 20 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 Javascript
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
smarty section简介与用法分析
2008/10/03 PHP
php中去除所有js,html,css代码
2010/10/12 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
python正则表达式re之compile函数解析
2017/10/25 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
Python异常处理操作实例详解
2018/05/10 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
利用nohup来开启python文件的方法
2019/01/14 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
总经理办公室主任岗位职责
2013/11/12 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
2015年路政工作总结
2015/05/22 职场文书
高温慰问简报
2015/07/21 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
Go语言并发编程 sync.Once
2021/10/16 Golang