ionic2中的for-each和angularjs2 [英] For-each in ionic2 with angularjs2
本文介绍了ionic2中的for-each和angularjs2的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用 IONIC-2 Beta 版制作了一个应用程序.我想使用 for-each 循环.是否可以在angular-V2中使用每个?
I make one application with IONIC-2 Beta version. I want to use for-each loop. is it possible to use for each in angular-V2?
谢谢.
推荐答案
首先在Component
中,你要声明你要显示的数组:
First in the Component
, you have to declare the array you want to show:
import { 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
},
];
}
}
如果你想改变代码中的值,你可以这样做:
If you want to change the values in the code, you can do it by doing:
// We iterate the array in the code
for(let data of this.displayData) {
data.value = data.value + 5;
}
然后在您的视图中,您可以像这样打印它们:
And then in your View you can print them like this:
<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="let data of displayData"
部分,其中:
Please notice that part *ngFor="let data of displayData"
where:
displayData
是我们在Component
中定义的数组let data of ...
定义了一个名为data
的新变量,它代表displayData
数组的每个元素.李>- 我们可以通过使用该
data
变量以及像{{ data.propertyName }}
这样的插值来访问每个数组元素的属性.
displayData
is the array we defined in theComponent
let data of ...
defines a new variable calleddata
, which represents each of the elements of thedisplayData
array.- we can access the properties for each array element by using that
data
variable, and interpolation like{{ data.propertyName }}
.
这篇关于ionic2中的for-each和angularjs2的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文