web-dev-qa-db-ja.com

angularjs2を使用したionic2のFor-each

IONIC-2 Betaバージョンで1つのアプリケーションを作成します。 for-eachループを使用します。角度V2のそれぞれに使用することは可能ですか？

ありがとう。

angulartypescriptionic-frameworkionic2ionic3
7
Jignesh M. Mehta

最初に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 }}。
11
sebaferreras