[解決済み] Angular 2: 配列の変更を検出するには？(@inputプロパティ)

質問

ajaxリクエストを使用してオブジェクトの配列を取得する親コンポーネントがあります。

このコンポーネントには2つの子コンポーネントがあります。1 つはオブジェクトをツリー構造で表示し、もう 1 つはそのコンテンツを表形式でレンダリングします。親コンポーネントは、@input プロパティを通じて子コンポーネントに配列を渡し、子コンポーネントはコンテンツを適切に表示します。すべてが期待通りです。

問題は、オブジェクト内のフィールドを変更したときに発生します：子コンポーネントはそれらの変更について通知されません。手動で配列をその変数に再割り当てした場合のみ、変更がトリガーされます。

私はKnockout JSで作業するのに慣れており、observableArraysのような効果を得る必要があります。

DoCheckについて何か読んだことがありますが、それがどのように機能するのかよくわかりません。

どのように解決するのですか？

OnChanges ライフサイクルフック は、入力プロパティのインスタンスが変更されたときのみトリガーされます。

入力配列の中の要素が追加、移動、削除されたかどうかをチェックしたい場合は IterableDiffers の中に DoCheck ライフサイクルフック内で以下のように記述します。

constructor(private iterableDiffers: IterableDiffers) {
    this.iterableDiffer = iterableDiffers.find([]).create(null);
}

ngDoCheck() {
    let changes = this.iterableDiffer.diff(this.inputArray);
    if (changes) {
        console.log('Changes detected!');
    }
}

配列内のオブジェクトの変更を検出する必要がある場合、すべての要素を繰り返し処理する必要があり、その際に KeyValueDiffers を各要素に対して適用する必要があります。(前のチェックと並行して行うことができます)。

詳しくはこちらの記事をご覧ください。 Angular2で配列内のオブジェクトの変更を検出する