ウェブサイト検索

javascript - Angular 2 : Observable の map で呼び出される関数内でクラス変数を参照する方法


Observable をサービスで使用する Angular 2 アプリケーションで、map 内でクラスのプライベートフィールドをどのように参照できますか?以下のコードに示すように、extractData 関数内で this._dataStore をどのように参照できますか?ありがとうございます!

この質問を見かけたことがあり、関数の本体を () => {function body here} の中に入れることを提案しているのですが、関数を呼び出せるようにしたいです。特に、このロジックは他の場所でも使われる可能性が高いので(あちこちにコピー&ペーストしたくありません)。

@Injectable()
export class DataService{
  constructor(private http: Http){}
  private _dataStore = [];

  getData(): Observable<any> {
    if(this._dataStore.length > 0) { //return cached data
      return Observable.of(this._dataStore);
    } else {
      return this.http.get('url')
                   .map(this.extractData)
                   .catch(this.handleError);
    }
  }

  private extractData(res: Response){
    if(res.status < 200 || res.status >= 300){
      throw new Error('Bad response status '+ res.status);
    }
    var data = res.json();
    for (var i in data['items']){
      this._dataStore.push(data['items'][i]); //ERROR this._dataStore undefined
    }
    return this._dataStore;
  }

回答 #1

全体の extractData 呼び出しをアロー関数でラップすることができます:

this.http.get("url")
         .map(data => this.extractData(data))
         .catch(err => this.handleError(err))

同様に this.handleError に対しても行ったことに注意してください。この手法は、呼び出し時に this への参照を保持します。

関連記事