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. (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?