angular - angularjs2 ile ionic2'de for-each

IONIC-2 Beta sürümü ile bir uygulama yapıyorum. for-each döngüsünü kullanmak istiyorum. Angular-V2'de for each kullanmak mümkün mü?

Teşekkürler.

Cevap #1

İlk olarak Component içinde, göstermek istediğiniz diziyi bildirmelisiniz:

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

Eğer koddaki değerleri değiştirmek istiyorsanız, bunu şu şekilde yapabilirsiniz:

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

Ve sonra Görünümünüzde onları böyle yazdırabilirsiniz:

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

Lütfen şuna dikkat edin: *ngFor="let data of displayData" kısmı, burada:

  • displayData, Component içinde tanımladığımız dizi.
  • let data of ... ifadesi, displayData dizisinin her bir öğesini temsil eden data adında yeni bir değişken tanımlar.
  • Her dizi elemanı için özelliklere o data değişkenini kullanarak ve {{ data.propertyName }} gibi enterpolasyon yaparak erişebiliriz.

İlgili makaleler