Angular2 关于*ngFor 嵌套循环
在项目开发中拿到的数据是这样的,要循环遍历出来。可是在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);
}
结果:
参考于:
https://segmentfault.com/q/1010000005727687
http://stackoverflow.com/questions/40451269/typescript-sort-generic-array
分类:
ionic2+angular2
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?