angular - *ngfor-array till ion-list i ionic 2


Jag är ny i Ionic 2. Jag skapade en array och sedan vill jag loopa igenom arrayen till ion-list.

min produk.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';


@Component({
  selector: 'page-produk',
  templateUrl: 'produk.html',
})
export class ProdukPage {



  constructor(public navCtrl: NavController, public navParams: NavParams) {
    var menu: any[] = [
      "menu 1",
      "menu 2",
      "menu 3"
    ];
  }

}

Jag försökte med den här koden i mitt HTML, men det fungerar inte

<ion-content padding>

  <ion-list>
    <ion-item *ngfor = "let item of menu;">
     {{menu}}
    </ion-item>  
  </ion-list>

</ion-content>

Svar #1

Du bör definiera en klassvariabel.

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';


@Component({
  selector: 'page-produk',
  templateUrl: 'produk.html',
})
export class ProdukPage {

   menu: any[];

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.menu: any[] = [
      "menu 1",
      "menu 2",
      "menu 3"
    ];
  }

}

Svar #2

menu behöver vara en klassvariabel för att detta ska fungera.

export class ProdukPage {
 menu:any[]=[]; //initialize to empty list to avoid undefined/null errors for `menu` in the template.
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.menu = [
      "menu 1",
      "menu 2",
      "menu 3"
    ];
  }
}

Relaterade artiklar