javascript - Why do member variables declared in Angular2 show undefined?

Question

I am using angular and ionic2 to make a demo of adding a memo event, and the result page reports an error,

AlertCmp.html:1 ERROR TypeError: Cannot read property 'push' of undefined
    at Object.handler (check-list.ts:40)
    at AlertCmp.btnClick (alert-component.js:184)
    at Object.eval [as handleEvent] (AlertCmp.html:1)
    at handleEvent (core.es5.js:11914)
    at callWithDebugContext (core.es5.js:13206)
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:12794)
    at dispatchEvent (core.es5.js:8814)
    at core.es5.js:9406
    at HTMLButtonElement.<anonymous> (platform-browser.es5.js:2687)
    at t.invokeTask (polyfills.js:3)

I am puzzled and hope for an answer. Code:

import { Component } from '@angular/core';
import {AlertController, IonicPage, NavController, NavParams} from 'ionic-angular';
import {CheckListModel} from "../../models/check-list-model";

@Component({
  selector: 'page-check-list',
  templateUrl: 'check-list.html',
})
export class CheckListPage {
      checklists:CheckListModel[];
      constructor(public navCtrl: NavController, public navParams: NavParams,public alertCtrl: AlertController) {
      }

      ionViewDidLoad() {
        console.log('ionViewDidLoad CheckListPage');
      }
      save(){};
      addChecklist(){
        let prompt= this.alertCtrl.create({
          title:'添加新的事项',
          message:'在这里你可以添加新的待办事项',
          inputs:[
            {name:'name'}
          ],
          buttons:[
            {
              text:'取消'
            },
            {
              text:'保存',
              handler: data => {
               let newChecklist= new CheckListModel(data.name,[]);
               this.checklists.push(newChecklist);
               newChecklist.checklistObservable.subscribe(res=>{this.save()});
                this.save();
              }
            }
          ]
        });

        prompt.present();
      };
      renameChecklist(checklist){
        let prompt= this.alertCtrl.create({
          title:'修改事项',
          message:'在这里你可以修改你的待办事项',
          inputs:[
            {name:'name'}
          ],
          buttons:[
            {
              text:'取消'
            },
            {
              text:'保存',
              handler: data => {
                let i= this.checklists.indexOf(checklist);
                this.checklists[i].setTitle(data.name);
                this.save();
              }
            }
          ]
        });
        prompt.present();
      };

      removeChecklist(checklist): void{

        let index = this.checklists.indexOf(checklist);

        if(index > -1){
          this.checklists.splice(index, 1);
          this.save();
        }

      };

      viewChecklist(checklist): void {
        this.navCtrl.push(CheckListPage, {
          checklist: checklist
        });
      }



}

Running the code shows that the push method is undefined. I consolelogged this.checklists in the addchecklist method and it shows undefined;
Attached is the CheckListModel code below:

import {Observable} from "rxjs/Observable";

export class CheckListModel{
  checklistObservable: any;
  checklistObserver: any;
  constructor(public title: string, public items: any){
    this.checklistObservable=Observable.create(observer=>this.checklistObserver=observer);
  }
      addItem(item){
        this.items.push({
          title: item,
          checked: false
        });
        this.checklistObserver.next(true);
      }

      removeItem(item){
        let i=this.items.indexOf(item);
        if(i>-1){this.items.splice(i,1)}
        this.checklistObserver.next(true);
      }

      renameItem(item,title){
        let i=this.items.indexOf(item);
        if (i>-1){this.items[i].title=title}
        this.checklistObserver.next(true);
      }

      setTitle(title){
        this.title=title;
        this.checklistObserver.next(true);
      }

      toggleItem(item){
        item.checked=!item.checked;
        this.checklistObserver.next(true);
      }
}

Please help me find out what's going on?

Answer 1

Before

this.items.push() let this.items = [] assign a value, otherwise an underfined of course has no push() method

Answer 2

It should be enough to change any of the items type into an array