angular - ionic2中的for-each和angularjs2

Question

我使用 IONIC-2 Beta 版本制作了一个应用程序。我想使用for-each循环。是否可以在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 }}.