web-dev-qa-db-fra.com

Pour-chacun en ionic2 avec angularjs2

Je fais une application avec la version IONIC-2 Beta. Je veux utiliser la boucle for-each. est-il possible d'utiliser pour chacun en angulaire-V2?

Merci.

angulartypescriptionic-frameworkionic2ionic3
7
Jignesh M. Mehta

Tout d'abord dans le Component, vous devez déclarer le tableau que vous souhaitez afficher:

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

Si vous souhaitez modifier les valeurs dans le code, vous pouvez le faire en faisant:

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

Et puis dans votre vue, vous pouvez les imprimer comme ceci:

<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>

Veuillez noter que la partie *ngFor="let data of displayData" où:

  • displayData est le tableau que nous avons défini dans le Component
  • let data of ... définit une nouvelle variable appelée data, qui représente chacun des éléments du tableau displayData.
  • nous pouvons accéder aux propriétés de chaque élément du tableau en utilisant cette variable data et une interpolation comme {{ data.propertyName }}.
11
sebaferreras