RxJS subscribe（）関数内のコンポーネント変数は定義されていません

Question

サブスクリプション内の変数は未定義ですが、サービスをサブスクライブする前にブレークポイントを置くと、変数が定義されます。サービスで

：コンポーネントで

getCashierRiskProfiles(): Observable<ICashierRiskProfile[]> { 
    return this.http.get(this._baseUrl + "src/HTTPJson/cashierriskprofile.json") 
     .map((res: Response) => res.json()) 
     .catch((error: any) => Observable.throw(error.json().error || 'Server error')); 
} 

：

import { Component, OnInit} from "@angular/core"; 
import { CashierRiskProfileService} from "./cashierriskprofile.service"; 
import { ICashierRiskProfile} from "../shared/interfaces"; 
import { Observable } from 'rxjs/Observable'; 

    @Component({ 
      selector: "cashierriskprofile", 
      templateUrl: "../src/app/cashierriskprofile/cashierriskprofile.component.html" 
      }) 

    export class CashierRiskProfileComponent implements OnInit { 
      filterText : string; 
      cashierRiskProfiles: ICashierRiskProfile[]; 

     constructor(private sorter: Sorter, 
       private service: CashierRiskProfileService) { 

      } 

     ngOnInit() { 
       this.filterText = "Filter Exceptions:"; 
       //// Observable technique 
       this.service.getCashierRiskProfiles() 
        .subscribe((riskProfiles) => { 
        this.cashierRiskProfiles = riskProfiles; 
        this.filterText = "Inside Subscribe:"; 

        }, 
        err => { 
         // Log errors if any 
         console.log(err); 
        }); 
      } 

上記部品コードでngonInit（）サービスコール、内部の購読内部this.cashierRiskProfilesは定義されていませんが、私は前にブレークポイントを入れた後、サービスコールには、その変数が使用可能で定義されています。私はこの問題を持つ多くの人々がthis.variablename getttingで定義されていないコンポーネント変数を見てきました。 this.filterTextに気付くと、dataserviceコールの外に割り当てられた値を取得できますが、subscribe内にブレークポイントを入れると、this.filterTextはどのように失われているのかわかりません。誰もが何が起こっているの解決策を提供できますか？

Answer 1

あなたのコードはよかったです。私は、実行時に、これは内部のサブスクライブからだと推測とにかくあなたが次のことを試してみて、それがうまく

ngOnInit() { 
    this.filterText = "Filter Exceptions:"; 
    this.populateCashierRiskProfiles(); 
} 

populateCashierRiskProfiles() { 
    //// Observable technique 
    this.service.getCashierRiskProfiles() 
     .subscribe((riskProfiles) => { 
      this.cashierRiskProfiles = riskProfiles 
     }); 

} 

Answer 2

を動作するかどうか私に知らせることができている私のプロジェクトで同じアプローチを、以下、私のために

を正常に動作していますSafeSubscribe、あなたのコンポーネントではありません。

使用の閉鎖は、このように、コンポーネントのメソッドを呼び出すには：

populateCashierRiskProfiles() { 
    const that = this; 
    //// Observable technique 
    this.service.getCashierRiskProfiles() 
     .subscribe((riskProfiles) => { 
      that.cashierRiskProfiles = riskProfiles 
     }); 
}