详解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将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
Three.JS实现三维场景
Dec 30 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
vue引用外部JS的两种种方法
Jan 28 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+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
javascript常用函数(2)
2015/11/05 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
js实现车辆管理系统
2020/08/26 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
Python实例一个类背后发生了什么
2016/02/09 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
Python 从相对路径下import的方法
2018/12/04 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
小学生自我评价范文
2014/01/25 职场文书
给实习单位的感谢信
2014/02/01 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
作风整顿剖析材料
2014/09/30 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书