Angular2 Update非同期モデルアップデートのビュー

Question

データストアに依存するAngular2コンポーネントがあります。 テンプレートには、そのストアにいくつかのデータバインディングがあります。 "{{datastore.weather.curTemp}}" データストアはhttpで時折更新されます。

これはasnycの方法で動作することがわかりました。新しいデータが到着したときにcurTempが自動的に更新されないのはなぜですか？

私の現在の解決策は、変更を通知するためにEventEmitterを使用することですが、バインドするローカル変数、データストアから多くの変数が必要な場合は乱雑になる可能性があります。私はChangeDetectorRefでdetectChanges（）を呼び出すでしょう。

私は適切なトラックにいますか？または、私のasnyデータを簡単に埋め込む方法が欠けていますか？

ありがとうございました！あなたのcomponent.tsにあなたは、そのへの参照を取得することができ

datastore.service.ts

public weather: Subject<any> = new Subject(); // better make this private and expose it `asObservable` via a getter nethod 

updateWeather(){ 
    http.get(...).subscribe(res => this.weather.next(res.json())) 
} 

：

Answer 1

あなたの問題を解決する方法はweatherSubjectを作ることであろう

public weather$: Observable<any>; 
constructor (dataStore: DataStore){ 
    this.weather$ = dataStore.weather; 
} 

テンプレートでこのように使用します。

{{(weather$ | async).curTemp}} 

このようにして、コンポーネントを破棄したときにサブスクリプションを処理する必要がなくなり、非同期パイプで処理されるので、サブスクリプションを処理する必要はありません。

Answer 2

あなたのコンポーネントが更新されていない場合、非同期スレッドがNgZoneの外側で実行されている可能性があります。コンポーネントのNgZoneの中に割り当てを行う必要があります。

import {Component, NgZone} from "@angular/core"; 

@Component({ 
    selector: 'app', 
    templateUrl: './app.component.html' 
}) 

export class MyComponent { 
    myValue: string; 

    constructor(private ngZone: NgZone) { 
    } 

    getData() { 
    const self = this; 
    myAsyncCall().then(result => { 
     ngZone.run(() => { 
     self.myValue = result; 
     }); 
    }); 
    } 
}