無法在訂閱功能中獲得'this'組件

我的問題與這些非常相似，但我沒有解決我的問題;無法在訂閱功能中獲得'this'組件

這裏是我的打字稿組件類：

export class Test{ 
    x: string; 
} 

export class TestComponent implements OnInit{ 
    test: Test; 

    constructor(private testService: TestService){} 

    ngOnInit(){ 
      this.testService.getTest() 
       .subscribe((res) => { this.test = res.test;}, ...); 
      console.log(this.text.x) //it becomes undefined 
    } 
}

我使用一飲而盡-T ypescript和輸出就像這些;

//when targeting es6 

let testComponent = class TestComponent ... { 
    constructor(testService){ 
      this.testService = testService; 
    } 

    ngOnInit(){ 
      this.testService.getTest() 
       .subscribe((res) => {this.test = res.test;}, ...); 
      console.log(this.text.x) 
    } 
} 

//when targeting es5 

var TestComponent = (function(){ 
    function TestComponent(testService){ 
     this.testService = testService; 
    } 

    TestComponent.prototype.ngOnInit = function(){ 
      var _this = this; 
      this.testService.getTest() 
       .subscribe(function (res) { _this.test = res.test }, ...); 
      console.log(this.text.x) 
    } 
}())

當我想嘗試達到'this.test.x'時，我從兩個輸出的瀏覽器中得到以下錯誤;

EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'x' of undefined

當我登錄了this.test，它是undefined。我的TestService被正確注入，請求來到我的API並且res.test包括我需要但是我不能使用this.test，因爲它總是未定義的。我不知道我在做什麼錯。有沒有人可以幫助我？最後，我想問一下，在考慮瀏覽器兼容性，es5或es6時，我應該選擇哪一個？

來源

2016-08-24 ulubeyn

什麼是「whateverItIs」。我在你的代碼中沒有看到你發佈的內容？展開構造函數並放置一個'console.log（testService）'以確保服務正在傳遞/注入到構造函數中。 – Martin

這只是我的Test類的任何屬性，我寫了'whateverItIs'的屬性名稱。 TestService被正確注入，我的API獲取請求。 – ulubeyn

您可以請包括您的測試課程的一些代碼。謝謝。我只想看看真實的屬性名是什麼，所以我可以看到哪個對象是'undefined'。 – Martin

在箭頭函數內移動console.log語句。

ngOnInit(){ 
      this.testService.getTest() 
       .subscribe((res) => { 
       this.test = res.test; 
       console.log(this.text.x) 
      }, ...); 

    }

如果你有你想用this.test做其他事情，那麼你將不得不搬完裏面太（或添加其他功能和調用從回調內部）。基本上，如果您的服務返回Observable，這意味着回調不會在您稱爲該功能的相同「框架」中運行。在你原來的代碼，這是操作的順序：

getTest被調用時，一個AJAX操作開始
的console.log呼籲，版畫不確定。
由於請求與服務器通信，用戶得到的UI時間沒有多少第二秒
請求結束，subscribe(() =>調用回調。 this.test已設置。

來源

2016-08-24 13:19:55 Katana314

這裏是一個更深入的解釋異步編程的鏈接。這不是特定於Angular2或TypeScript http://code.tutsplus.com/tutorials/event-based-programming-what-async-has-over-sync--net-30027 – Martin

如果我想使用'this 。[formGroup]'內的.test.x'？當我在訂閱中調用它時，出現錯誤，或者我應該使用模板驅動的表單而不是ReactiveForms？ @ Katana314 @Martin – ulubeyn

你可能想簡單地用'* ngIf =「test」'包裝你的表單。通過這種方式，在你的數據返回之前，表單中對'test.x'的引用不會被調用。另一種選擇是使用'async'管道。或者兩者的結合。 – Martin

「_this.componentProperty」適用於我，而不是在「subscribe（）」rxjs調用中使用「this.componentProperty」。

來源

2018-02-27 08:34:46

無法在訂閱功能中獲得'this'組件

回答

相關問題