2ウェイバインディングで多くの入力要素を持つAngular2のパフォーマンス

Question

私はスプレッドシートに似たUIを表示するコンポーネントを持っています。変更可能なオブジェクトへの双方向バインディング[（ngModel）]を持つ要素はたくさんあります。

入力数が100を超えて大きくなるとすぐに、UIが低速になります。プロファイラは、Decimal形式（小数点以下の桁数）で多くの時間を示します。何とか不変オブジェクトを使用して

1. ：

   は、私は可能な解決策のカップルを考えることができますか？

2. 2ウェイデータバインディングをカスタマイズしますか？

私はChangeDetectionStrategy OnPushを使用していないのですが、私はこれが役立つとどのように実際に[（ngModel）]でそれを実装するために、HTML入力にどのようになど興味があります。

Answer 1

NgModelはディレクティブなので、変更検出方法はサポートされていません。つまり、NgModelを避けるべきです。唯一の方法は、OnPush戦略を使用し、入力フィールドをラップするカスタムコンポーネントを作成することです。

Answer 2

ページの多くの入力フィールドは、CPUとユーザーの両方にとってストレスです。

多くの入力フィールドを含むスプレッドシートを同時に表示するのではなく、セルを入力フィールドにするのはフォーカスを合わせたときだけにし、それ以外の場合はセルの値のみを表示します。編集中の現在のセルの入力チェックで* ngIfを使用します。

この方法では、目的の機能を維持できるだけでなく、注目しているスプレッドシートセルのみを入力にすることで、ページのパフォーマンスが向上するはずです。