テンプレートで観測可能なデータが更新されていません

Question

私はAngular 2を学び、Angular CLIを使ってAngular 2で作成したAngular 1アプリを再構築しようとしています。私は正常に起動するHTTP GET要求をセットアップし、結果を解釈するためにサブスクライバをセットアップし、サブスクライバ機能のコンソールログは私が期待するデータを表示します。ただし、テンプレート上のデータは更新されません。

データを初期値、ngOnInitの値、およびサブスクライバ関数に設定しようとしましたが、initialとngOnInitはそれに応じてテンプレートを更新しました。私の人生のために、なぜテンプレートが購読で更新されないのか理解できません。

events: any[] = ['asdf']; 

constructor(private http: Http) { 
} 

ngOnInit() { 
    this.events = ['house']; 
    this.getEvents().subscribe(this.processEvents); 
} 

getEvents(): Observable<Event[]> { 
    let params: URLSearchParams = new URLSearchParams(); 
    params.set('types', this.filters.types.join(',')); 
    params.set('dates', this.filters.dates.join(',')); 
    return this.http 
     .get('//api.dexcon.local/getEvents.php', { search: params }) 
     .map((response: Response) => { 
      return response.json().events; 
     }); 
} 

processEvents(data: Event[]) { 
    this.events = ['car','bike']; 
    console.log(this.events); 
} 

データはngForで表示されますが、車と自転車は表示されません。どこが間違っていたのですか？

Answer 1

あなたはこのようなものを行う場合、：

.subscribe(this.processEvents); 

コンテキストに迷子processEvents機能です。

あなたはそれをバインドするかがあります。

.subscribe(this.processEvents.bind(this)); 

は、匿名関数を使用します。

.subscribe((data: Events) => {this.processEvents(data)}); 

またはクラスのプロパティにあなたの方法を設定します。

processEvents: Function = (data: Event[]) => { 
    this.events = ['car','bike']; 
    console.log(this.events); 
} 

お気に入りを選んで、私は最後のオプションが好きです。eventListenersを使用すると、このmで簡単に切り離すことができます民法。

Answer 2

実際に何が起こっているのかわからないのは、processEventsです。あなたはあなたの応答をサブスクライブしたい場合は、単に実行します。あなたは活字体のthis文脈を尊重しないと間違って行っている

this.getEvents() 
    .subscribe(data => { 
    this.events = data; 
});