javascript - Angular2中声明的成员变量为何显示undefined？

问题描述

在用angular和ionic2 做个添加备忘事件demo，结果页面报错，

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)

百思不得其解，望解答。代码：

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}); }}

运行代码显示push方法未定义，我在addchecklist方法中consolelog了this.checklists显示undefine;下面附上CheckListModel代码：

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); }}

求大神帮看下究竟咋回事？

问题解答

this.items.push()之前先让this.items = []赋个值吧，不然一个underfined当然没有push()的方法

items类型的any修改成数组应该就可以了吧