角度 6.0.1。
この問題は大規模なアプリケーション内で顕在化していますが、何が起こっているのかを確認するために簡単なコンポーネントを作成しました。simple コンポーネントには単純なテンプレートがあります。
{{myProp}}
ngOnInit で設定すると、予想どおり、画面にhellothis.myProp = 'hello';という単語が表示されます。ここまでは順調ですね。
ただし、 の値を更新しようとするとmyProp、setTimeoutUI は更新されません。
this.myProp = 'hello';
setTimeout(() => {
this.myProp = 'goodbye';
}, 3000);
UI に表示される値はまだhelloです。
コンストラクターに挿入してタイマー内ChangeDetectorRefで呼び出すと、UI が更新されます。cdr.detectChanges()
これは予想される動作ですか、それとも何が間違っていますか? 私はこれを呼び出す必要があるとは思わないでしょうdetectChanges。ChangeDetectorStrategyコンポーネントの は変更していないので、そのままですdefault。
「実際の」アプリでmyPropは、タイマーではなくObservableサブスクリプション内で更新していることに注意してください。そこでは UI が更新されないため、これを調査し、問題を可能な限り簡単に再現するためにタイマーで終了するようになりました。私が知る限り、どのような種類の非同期方法でもプロパティ値を更新しても、UI に変化は表示されません。
アップデート
私の setTimeout への言及は物事を混乱させたと思います。私はそれをデバッグの手段として使用していました。この質問を作り直す代わりに、ここに新しい質問 ( Angular interpolated value not updated on subscription ) を投稿し、より良い説明と、私を悲しませている ngRx コードを示しました。
更新 #2
この問題は、親コンポーネントが にChangeDetectionStrategy設定されていることが原因でしたOnPush。上記で参照した質問を参照してください。