For-each in ionic2 with angularjs2

Question

我用IONIC-2 Beta版製作了一個應用程序。我想爲每個循環使用。是否有可能在angular-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; 
} 

，然後在視圖中，您可以打印出來是這樣的：

<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 }}來訪問每個數組元素的屬性。