如何使用 Ionic 2 在我的代码中显示 model.ts 的数据

Question

现在我尝试使用 ionic2 进行数组数据建模。

我在"src/app/models"中创建了"model.ts"，并在"setting.ts"中使用数组数据声明。

接下来，我称之为"设置.html"。

顺便一提。。。有一些问题。构建和运行是成功的。但是任何数据都没有显示在屏幕上。

不是错误，我不知道哪里错了。

请找到错误的点并修复它。

有我的代码..

workoutlist-model.ts

export class WorkoutlistModel {
constructor(public Workoutlist: any[]) {
    this.Workoutlist = [];
}
addItem(nm, gl) {
    this.Workoutlist.push({
        name: nm,
        goal: gl
    });
}
removeItem(nm, gl) {
    for (var i = 0; i < this.Workoutlist.length; i++) {
        if (this.Workoutlist[i].name == nm) {
            if (this.Workoutlist[i].goal == gl) {
                this.Workoutlist.splice(i);
            }
        }
    }
}
}

设置.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { WorkoutlistModel } from '../../app/models/workoutlist-model';
@Component({
  selector: 'page-setting',
  templateUrl: 'setting.html'
})
export class Setting {
  constructor(public navCtrl: NavController) {
    new WorkoutlistModel([{ name: 'Push-Up', goal: 100 },
      { name: 'Squat', goal: 150 },
      { name: 'Sit-Up', goal: 45 }]);
  }
}

设置.html - 使用它的部分。

<ion-content style="height: 200px; outline: green">
  <ion-card *ngFor="let WO of WorkoutlistModel;">
    <button ion-item>
      <div style="float: left;padding: 0px;">name : {{WO.name}}</div>
      <div style="float: right;padding: 0px;">goal : {{WO.goal}}</div>
    </button>
  </ion-card>
</ion-content>

Answer 1

您尚未声明或分配WorkoutlistModel

此外，WorklistModel 是类，而不是一个数组来遍历*ngFor

export class Setting {
  workListModel:any;//declare
  constructor(public navCtrl: NavController) {
    this.workListModel = new WorkoutlistModel([{ name: 'Push-Up', goal: 100 },
      { name: 'Squat', goal: 150 },
      { name: 'Sit-Up', goal: 45 }]);//assign
  }
}

在网页中

<ion-card *ngFor="let WO of workListModel.getList();"><!-- get the list of items from class to traverse. may have to create this function -->
    <button ion-item>
      <div style="float: left;padding: 0px;">name : {{WO.name}}</div>
      <div style="float: right;padding: 0px;">goal : {{WO.goal}}</div>
    </button>
  </ion-card>

Answer 2

您没有注入模型。所以把它改成这个。

constructor( Workoutlist: any[]) {
    this.Workoutlist = Workoutlist;
}