0
角型マテリアルのオートコンプリートを使用して、ユーザーは "[ID＃] - [テキスト形式説明]"の文字列を検索できます。 データは、ページ読み込みの開始時に事前に取得され、約39,000文字列を保持します。角型マテリアルオートコンプリートまたは代替のスピードアップ
<md-input-container>
<input mdInput placeholder="TSN Search" [mdAutocomplete]="auto" [formControl]="TSN_Ctrl">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let tsn of filtered_TSNs | async" [value]="tsn">
{{ tsn }}
</md-option>
</md-autocomplete>
そして、私のtypescriptですコードは次のとおりです：
私のHTMLコードがある
TSN_Ctrl: FormControl = new FormControl();
filtered_TSNs: any;
constructor(){
this.filtered_TSNs = this.TSN_Ctrl.valueChanges
.startWith(null)
.map(val => val ? this.filter_TSNs(val) : this.dataService.tsnTitles.slice());
}
private filter_TSNs(val: string) {
return this.dataService.tsnTitles.filter(option => new RegExp(`^${val}`, 'gi').test(option));
}
私は基本的にわずかに適応して、アンギュラ材料の例から、標準のコードを使用しています。
オートコンプリート機能は非常に遅く、本質的に応答しません。私は多くのオプション（39kの文字列）があることを理解していますが、事前に検索されローカルに保存されています。
これをスピードアップするためにできることがあるのですか、リストに文字列が多すぎますか？ IDフィールドのみを含むフィルタメソッドと文字列を変更すると、処理速度が向上する可能性がありますか？まったく別のライブラリを使用する必要があります（つまり、角度材料オートコンプリートが遅いことがわかっている場合）。
'filter.TSNs'メソッドに' console.time'を追加して、各フィルタの使用時間を見てみましょう。かなり速いと思いますが、真の犯人はおそらく、39kオプションコンポーネント（！）をレンダリングしようとすると、オートコンプリート/アングルです。最初の50オプションのように、 'filter_TSNs'のサブセットを返すことができます。 –
あなたは天才です。ユーザーが少なくとも5文字を入力すると、filter_TSNs関数の実行のみが終了しました。最初の5文字の後に返されるサブセットは大幅に縮小され（50程度）、問題はフィルタ機能自体ではなく、オートコンプリート/アングルで発生していました。 – fila