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); }}
求大神帮看下究竟咋回事?
问题解答
回答1:this.items.push()之前先让this.items = []赋个值吧,不然一个underfined当然没有push()的方法
回答2:items类型的any修改成数组应该就可以了吧
相关文章:
1. mysql 一个sql 返回多个总数2. javascript - 前端开发 本地静态文件频繁修改,预览时的缓存怎么解决?3. css - 定位为absolute的父元素中的子元素 如何设置在父元素的下面?4. 从Spring MVC XML文件移至javaconfig我的数据库XML文件真的让我迷茫了5. javascript - 小demo:请教怎么做出类似于水滴不断扩张的效果?6. 使用C#如何导入导出Excel文件?7. javascript - vue生成一维码?求助!!!!!急8. angular.js使用ui-router注入报错,附报错图9. angular.js - angular ui bootstrap 中文显示问题10. mysql 能不能创建一个 有列级函数 的联合视图?
