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()的方法

这篇关于javascript - Angular2中声明的成员变量为何显示undefined？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！