角2無法訪問此可觀察到的回調

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

我認爲這與在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; 
} 

希望它可以幫助你， 蒂埃裏

Answer 2

當我去掉......一切正常

那麼，你的_processData()方法不能試圖讀取或寫入任何組件屬性，因爲它無線沒有適當的/預期的this上下文。使用.subscribe(this._processData, ...)，_processData()中的this上下文將是訂購者對象，而不是您的組件。

我建議你使用arrow function的成功和錯誤回調都獲得「相同的詞彙this爲周圍的代碼」 - 即讓this是組件：

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

我找到這比使用bind()更清潔。