詳解Angular2 關(guān)于*ngFor 嵌套循環(huán)
更新時間：2017年05月22日 14:21:32 作者：huangenai
這篇文章主要介紹了詳解Angular2 關(guān)于*ngFor 嵌套循環(huán)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在項目開發(fā)中拿到的數(shù)據(jù)是這樣的，要循環(huán)遍歷出來?？墒窃趎g2中好像不能直接遍歷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"},
];
在搜索之后發(fā)現(xiàn)了這種方法可以實現(xiàn)。
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>關(guān)于ngfor 嵌套循環(huán)</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);
}
結(jié)果：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家介紹了monaco?editor在Angular的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
詳解angular2實現(xiàn)ng2-router 路由和嵌套路由
本篇文章主要介紹了詳解angular2實現(xiàn)ng2-router 路由和嵌套路由，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
本文主要講解了Angular的路由動畫和高階動畫函數(shù)，對此感興趣的同學(xué)，可以把代碼親自實驗一下，理解其原理。2021-05-05
本文主要對支持Angular2的表格控件進行詳細介紹。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
Angular.js?實現(xiàn)帶手柄自由調(diào)整頁面大小的功能
這篇文章主要介紹了Angular.js?實現(xiàn)帶手柄自由調(diào)整頁面大小的功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Angular6中使用Swiper的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
AngularJs Managing Service Dependencies詳解
本站主要介紹AngularJs Managing Service Dependencies的知識資料，這里整理相關(guān)知識，及簡單示例代碼，有興趣的小伙伴可以參考下2016-09-09
本文主要介紹AngularJS 動畫,這里對動畫的資料詳細介紹并附有效果圖和代碼實例,有需要的小伙伴參考下2016-07-07
詳解Webstorm 下的Angular2.0開發(fā)之路(圖文)
這篇文章主要介紹了詳解Webstorm 下的Angular2.0開發(fā)之路(圖文) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
AngularJS是一個強大的前端框架,其模塊化架構(gòu)提供了高度的靈活性和可維護性,本文探討了AngularJS中模塊的概念,包括定義、用途及創(chuàng)建和配置方法,感興趣的朋友跟隨小編一起看看吧2024-09-09