サブスクライブ関数内のコンポーネントの 'this'を取得できません

Question

私の質問はこれらと非常に似ていますが、私は問題を解決できませんでした。ここで

cannot access to this of component in subscribe function

'this' scope in typescript callback function

Cannot Access Component Variables in Subscribe when using chrome inspector

unable to get component variables inside a RxJS subscribe() function

私typescriptですコンポーネントクラスです：

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を検討する際に、どちらをターゲットにすべきか質問したいと思います。

Answer 1

console.logステートメントを矢印機能内に移動します。あなたはthis.testでやってみたかった他のものを持っていた場合

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

    } 

は、その後、あなたも中にあるものを移動（または、別の関数を追加してコールバックの内側からそれを呼び出す）する必要があるとしています。基本的に、Observableを返すサービスがある場合、コールバックは関数を呼び出したのと同じ「フレーム」で実行されません。呼ばれる

1. getTestが呼び出され、AJAX操作が開始され
2. にconsole.log、未定義のプリント：あなたの元のコードでは、これは、動作の順序はでした。
3. ユーザーは、要求がサーバーと通信するときに多少のUIタイムを取得します。
4. リクエストが完了し、subscribe(() =>コールバックが呼び出されます。 this.testが設定されています。

Answer 2

"subscribe（）" rxjs呼び出しの中で "_this.componentProperty"は "this.componentProperty"ではなく "私のために"機能します。