角2 - メソッドで定義されていないコンポーネントプロパティ

Question

私はカスタムクラス配列であるプロパティを持っています。配列には、データのWebサービスを呼び出すサービスへの呼び出しが設定されます。私はobservableを購読しており、completeイベントを使ってグラフをロードするメソッドを起動しています。

グラフに使用するデータは、購読中に配置された配列から取得する必要がありますが、メソッドでこれを実行しようとすると、コンポーネントプロパティで未定義のエラーが発生します。これはなぜですか、私は同じクラスのメソッドからコンポーネントのプロパティにアクセス可能でなければなりません。 this.

ngOnInit(): void { 
    console.log('talking to service...'); 
    this._metricsService.getData() 
     .subscribe(
      data => this.metric = data, 
      error => this.errorMessage = <any>error, 
      () => this.LoadChart() 
     ); 
} 

Answer 1

矢印機能は、より多くの情報のため、このようにそれを行うあなたはChromeデベロッパーツールを使用している場合、それはまだヌルが表示されますについてlexical thisとarrow functionsもう一つを読みますクローム開発ツールのバグがあります。それが動作する。この、より具体的理由で構築する

LoadChart =() => void { 
    console.log(this.metric); // 
} 

Answer 2

の範囲を保持する

export class MetricsComponent implements OnInit{ 
errorMessage: string; 
metric: MetricData[] = []; 

//constructor is used for dependency injection 
constructor(public _metricsService: MetricsService){} 

ngOnInit(): void { 
    console.log('talking to service...'); 
    this._metricsService.getData() 
     .subscribe(
      data => this.metric = data, 
      error => this.errorMessage = <any>error, 
      this.LoadChart 
     ); 
} 

LoadChart(): void { 
    console.log(this.metric); // <== this returns as undefined 
}