For each in ionic 2 with angular 2

Question

I am making one application with beta version of IONIC-2. I want to use for each cycle. can i use for each in angular -V2?

Thanks.

Answer 1

First, in Component you need 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 this by following these steps:

 // 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 as follows:

 <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> 

Note that the *ngFor="let data of displayData" where:

• displayData is the array we defined in Component
• let data of ... defines a new variable called data that represents each of the elements of the displayData array.
• we can access the properties for each element of the array using this data variable and interpolation like {{ data.propertyName }} .