Блог

Я работаю над приложением angular 4, и у меня есть большой массив объектов (например, 200 строк) Итак, я ввел поисковый ввод, и ngFor связан с каналом, который фильтрует по имени в соответствии с тем, что вы пишете во входных данных. Что-то вроде этого

 <input type="text" [(ngModel)]="searchtext" placeholder="Search">
<div *ngFor="let m of (devices | filterEquipments : searchtext)">{{ m.name }}</div>
 

Проблема в том, когда я начинаю печатать. По-видимому, фильтрация происходит очень медленно при отображении содержимого в html.
Итак, исследуя решение, я увидел, что с помощью «trackBy» в «ngFor» можно оптимизировать результат.
Проблема в том, что я не знаю, как это правильно реализовать, и может ли это помочь мне быстрее фильтровать элементы.

Как я могу реализовать быстрый фильтр?

Может быть, попробуйте добавить некоторую задержку

 <input type="text" [value]="item.task_name"(keyup)="term$.next($event.target.value)">

import ......

import {Subject} from 'rxjs/Subject';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';
 

@Component{(
…
)}
экспортировать класс YourComponent {

   term$ = new Subject<string>();

  constructor() {
   this.term$
     .debounceTime(1000)
     .distinctUntilChanged()
     .switchMap(term => /*do something*/);
  }
}