回调在Angular2 / Firebase中生成“ TypeError:这是未定义的”

ska.dev

我试图了解这里的问题以及为什么如果我以某种方式调用函数会收到错误消息,而以另一种方式调用函数却没有收到错误消息,为什么呢?这是首先产生错误的方法:

player.service.ts文件

@Injectable我有

private roomsRef: Firebase;

constructor() {
    this.roomsRef   = new Firebase("https://xxx.firebaseio.com/rooms");
}

postGameActions(roomId: string) {
        console.log("post game actions start on " + roomId);

//error on below 'this'        
        this.roomsRef.child(roomId).child("board").once("value", snap => {
           let board = snap.val();
           //do stuff with 'board' object
        });
}

room.component.ts文件

activateTimer(roomId: string, roomName: string, callback) {
    var timer = setInterval(redirectTimer, 1000);
    var seconds: number = 5;
    var timerHtml = document.getElementById("divRedirectTimer" + roomName);
    timerHtml.innerHTML = "[" + seconds + "]";

    function redirectTimer() {
        timerHtml.innerHTML = "[" + (seconds--) + "]";
        if(seconds === 0) {
            clearInterval(timer);
            callback(roomId);
        }
    };
}

像这样调用非工作版本

activateTimer(room.id, room.name, _playerService.postGameActions)

错误:

EXCEPTION: TypeError: this is undefined

工作版本

像这样工作正常,但不使用,setInterval()因为activateTimer仅调用service方法

room.component.ts文件

activateTimer(roomId: string, roomName: string) {
    var timer = setInterval(redirectTimer, 1000);
    var seconds: number = 5;
    var timerHtml = document.getElementById("divRedirectTimer" + roomName);
    timerHtml.innerHTML = "[" + seconds + "]";

    function redirectTimer() {
        timerHtml.innerHTML = "[" + (seconds--) + "]";
        if(seconds === 0) {
            clearInterval(timer);
        }
    }

    this._playerService.postGameActions(roomId);

调用这样的工作版本

activateTimer(room.id, room.name)

当我postGameActions作为回调调用时,为什么“ this”未定义我确定我在这里缺少一些简单的东西

蒂埃里圣堂武士

您需要将调用包装到箭头函数中:

activateTimer(room.id, room.name, () => {
  _playerService.postGameActions();
});

代码中的问题是您直接引用了一个函数,因此丢失了将在其上执行的对象。

另一种方法是使用bind方法:

activateTimer(room.id, room.name, _playerService.postGameActions.bind(_playerService);

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

角度2 settimeout这是未定义的

Angular2:TypeError“此”。未定义

错误TypeError:无法读取未定义的Angular Firebase的属性'title'

为什么我不能从此回调函数内部调用类方法?错误TypeError:这是未定义的

Firebase函数承诺未定义TypeError

Angular2'this'未定义

NgZone / Angular2 / Ionic2 TypeError:无法读取未定义的属性“运行”

TypeError-函数未定义-Angular 2

Angular 2 TypeError:无法读取未定义的属性“ toUpperCase”

angular2:错误:TypeError:无法读取未定义的属性“ ...”

Angular2 OnInit 数据加载太慢导致未定义的 TypeError

TypeError:self.context.newUser在Angular2上未定义

TypeError:无法读取angular2中未定义的属性“ 0”以在datepicker中使用索引

Webpacked Angular2应用程序TypeError:无法读取未定义的属性“ getOptional”

Angular2:TypeError:无法读取未定义的属性“ Symbol(Symbol.iterator)”

angular2 TypeError:无法设置未定义的属性“名称”

Typescript / Angular2 TypeError:无法读取未定义的属性

执行回调函数时,Angular2组件的“ this”未定义

Firebase TypeError:无法读取未定义的属性“ val”

在angular应用中未定义importScripts firebase

无法读取未定义-Angular,Firebase的属性“ push”

在generator-gulp-angular中未定义“ firebase”

Angular TypeError无法读取未定义的属性“ then”

NativeScript/Angular - TypeError:无法读取未定义的属性“符号”

Angular 6:TypeError:无法读取未定义的属性“值”

Angular 6 TypeError:无法读取未定义的属性“ call”

TypeError:无法使用Angular读取未定义的属性“ comments”

Angular-TypeError:无法读取未定义的属性“名称”

Angular - TypeError:无法读取未定义的属性“订阅”