我用IONIC-2 Beta版制作了一个应用程序.我想使用for-each循环.是否可以在angular-V2中使用?
谢谢.
首先在Component中,您必须声明要显示的数组:
原文链接:https://www.f2er.com/angularjs/141220.htmlimport { Component } from "@angular/core"; @Component({ templateUrl:"home.html" }) export class HomePage { displayData : []; constructor() { this.displayData = [ { "text": "item 1","value": 1 },{ "text": "item 2","value": 2 },{ "text": "item 3","value": 3 },{ "text": "item 4","value": 4 },{ "text": "item 5","value": 5 },]; } }
如果要更改代码中的值,可以通过执行以下操作来执行此操作:
// We iterate the array in the code for(let data of this.displayData) { data.value = data.value + 5; }
然后在您的视图中,您可以像这样打印它们:
<ion-content class="has-header"> <ion-list *ngFor="let data of displayData; let i = index" no-lines> <ion-item>Index: {{ i }} - Text: {{ data.text }} - Value: {{ data.value }}</ion-item> </ion-list> </ion-content>
请注意部分* ngFor =“让displayData的数据”在哪里:
> displayData是我们在Component中定义的数组>让…的数据定义一个名为data的新变量,它代表displayData数组的每个元素.>我们可以使用该数据变量访问每个数组元素的属性,并像{{data.propertyName}}那样进行插值.