Question

我有以下代码：

onLogin(): void {

  this.message = "loading";

  this.api.login("username", "password")

    .subscribe(
      this._processData,
      this._logError,
      //error => { this._logError(error); },
    );

}

private _logError(data) {
  console.log(data);
  this.errorMessage = data.message;
};

当我用//error ->取消注释该行并对上面的行进行注释时，一切正常。

如果有直接调用解决方案我直接提供函数会很好。

有什么想法吗？

Answer 1

当我取消注释时...一切正常

好吧，你的_processData()方法一定不能尝试读取或写入任何组件属性，因为它没有正确/预期的this上下文。使用.subscribe(this._processData, ...)，this中的_processData()上下文将是订阅者对象，而不是您的组件。

我建议您使用arrow function进行成功和错误回调，以获得与周围代码相同的词汇this＆＃34; - 即，让this成为组件：

.subscribe(
  data  => this._processData(data),
  error => this._logError(error),
);

我觉得这比使用bind()更清洁。

Answer 2

我认为这是与在JavaScript和TypeScript中使用this关键字本身相关的问题。请看这个链接：https://github.com/Microsoft/TypeScript/wiki/'this'-in-TypeScript。

您可以尝试使用bind方法，如下所述：

onLogin(): void {
  this.message = "loading";

  this.api.login("username", "password")
    .subscribe(
      this._processData.bind(this),
      this._logError.bind(this)
    );
}

private _logError(data) {
  console.log(data);
  this.errorMessage = data.message;
}

希望它可以帮到你，亨利

Angular 2无法在可观察的回调上访问它

2 个答案: