javascript - Angular2中宣告的成員變數為何顯示undefined?
ringa_lee
ringa_lee 2017-06-26 10:54:08
0
2
829

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

求大神幫看下究竟咋回事?

##
ringa_lee
ringa_lee

ringa_lee

全部回覆(2)
女神的闺蜜爱上我

this.items.push()之前先讓this.items = []賦個值吧,不然一個underfined當然沒有push()的方法

ringa_lee

items類型的any修改成陣列應該就可以了吧

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板