*ngfor array to ion-list in ion 2

Question

我是ionic 2的新手。我创建了一个数组，然后我想将该数组循环到ion-list

我的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"
    ];
  }

}

我尝试在我的html中使用此代码，但它不起作用

<ion-content padding>

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

</ion-content>

Answer 1

menu需要是一个类变量才能正常工作。

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

Answer 2

你应该定义类变量。

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

}