Для каждого в ионном2 с угловым 2

Question

Я делаю одно приложение с бета-версией IONIC-2. Я хочу использовать для каждого цикла. можно ли использовать для каждого в угловом V2?

Спасибо.

Answer 1

Первый в Component, вы должны объявить массив, который вы хотите показать:

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 
     }, 
    ]; 
    } 
} 

Если вы хотите изменить значения в коде, вы можете это сделать, выполнив:

// We iterate the array in the code 
for(let data of this.displayData) { 
    data.value = data.value + 5; 
} 

И тогда в вашем View вы можете напечатать их, как это:

<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" где:

• displayData является массивом мы определили в Component
• let data of ... определяет новую переменную с именем data, который представляет собой каждый из элементов массива displayData.
• мы можем получить доступ к свойствам для каждого элемента массива, используя переменную data и интерполяцию, такую ​​как {{ data.propertyName }}.