详解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 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
javascript css float属性的特殊写法
Nov 13 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
用JS写一个发布订阅模式
Nov 07 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
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
iOS10推送通知开发教程
2016/09/19 PHP
php框架知识点的整理和补充
2021/03/01 PHP
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
Python中获取网页状态码的两个方法
2014/11/03 Python
Python3遍历目录树实现方法
2015/05/22 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
django2 快速安装指南分享
2018/01/05 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
化学教育专业自荐信
2014/07/04 职场文书
会议通知格式范文
2015/04/15 职场文书
法律意见书范本
2015/06/04 职场文书
亮剑精神观后感
2015/06/05 职场文书
Python必备技巧之函数的使用详解
2022/04/04 Python
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS