回答:
次のいずれかを試してください。
ApplicationRef.tick()
-AngularJSと同様$rootScope.$digest()
-コンポーネントツリー全体をチェックNgZone.run(callback)
-に似ています$rootScope.$apply(callback)
-つまり、Angularゾーン内のコールバック関数を評価します。コールバック関数を実行した後、コンポーネントツリー全体をチェックすることになると思いますが、よくわかりません。ChangeDetectorRef.detectChanges()
-に似ています$scope.$digest()
-つまり、このコンポーネントとその子のみをチェックしますあなたは、注入することができApplicationRef
、NgZone
またはChangeDetectorRef
あなたのコンポーネントに。
ChangeDetectorRef.detectChanges()
。ディレクティブが入力の値を更新する前にバリデーターが発動していました。
私は受け入れられた回答リファレンスを使用して例を挙げたいと思います。Angular2のドキュメントは非常に読みにくいので、これが簡単であることを願っています。
インポートNgZone
:
import { Component, NgZone } from '@angular/core';
クラスコンストラクターに追加します。
constructor(public zone: NgZone, ...args){}
でコードを実行zone.run
:
this.zone.run(() => this.donations = donations)
zone.run
コードを置くべきですdonations
か、そして正確には何ですか?
markForCheck()で更新できました
ChangeDetectorRefのインポート
import { ChangeDetectorRef } from '@angular/core';
注入してインスタンス化する
constructor(private ref: ChangeDetectorRef) {
}
最後に、変更検出を実行するようにマークします
this.ref.markForCheck();
markForCheck()が機能し、detectChanges()が機能しない例を次に示します。
https://plnkr.co/edit/RfJwHqEVJcMU9ku9XNE7?p=preview
編集:この例では、問題はもう描かれていません:(修正された新しいAngularバージョンが実行されている可能性があります。
(STOP / RUNを押して再度実行します)
Angular 2+では、@ Inputデコレーターを試してください
これにより、親コンポーネントと子コンポーネントの間の適切なプロパティバインディングが可能になります。
最初に、親にグローバル変数を作成して、子に渡されるオブジェクト/プロパティを保持します。
次に、親から渡されたオブジェクト/プロパティを保持するために子にグローバル変数を作成します。
次に、子テンプレートが使用される親HTMLで、角括弧表記を子変数の名前で追加し、親変数の名前と同じに設定します。例:
<child-component-template [childVariable] = parentVariable>
</child-component-template>
最後に、子コンポーネントで子プロパティが定義されている場所に、Inputデコレータを追加します。
@Input()
public childVariable: any
親変数が更新されると、子コンポーネントに更新が渡され、HTMLが更新されます。
また、子コンポーネントで関数をトリガーするには、ngOnChangesをご覧ください。