for-each in ionic2 with angularjs2

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 =“让displayData的数据”在哪里：

> displayData是我们在Component中定义的数组>让…的数据定义一个名为data的新变量,它代表displayData数组的每个元素.>我们可以使用该数据变量访问每个数组元素的属性,并像{{data.propertyName}}那样进行插值.