Труба через большой список - PullRequest
Новая
       11

Труба через большой список

0 голосов
/ 16 мая 2018

Итак, у меня есть список более 2000 сотрудников, и мне нужно отфильтровать их.Как у меня сейчас, он идет очень медленно и отстает на 2 секунды.Каждый раз, когда я набираю письмо, он проходит этот список каждый раз.

Есть ли способ устранения лага?

Обновление

Вот пример кода: 

<div style="margin-bottom:30px;" *ngIf="emulatedList">

   <input type="text" style="width:200px; background-color:#eeeeee;" name="searchText" [(ngModel)]="searchText" placeholder="Filter Dropdown List">

   <select style="background-color:#eeeeee;" [(ngModel)]="selected" placeholder="Emulate Person">
      <option *ngFor="let delegate of emulatedList | filter: searchText; trackBy: trackByName" [ngValue]="delegate.employeeid">
         {{delegate.employeename}}
      </option>
   </select>

   <span>
      <a (click)="addDelegate(selected)" style="background-color:#5B9C64; font-size:16px; color:#ffffff; padding:10px; margin-right:30px; border-radius: 10px;">Add Delegate</a>
   </span>

</div>

Компонент.TS файл: 

ngOnInit() {   
this.personsService.getEmulateList().subscribe(data => {
  setTimeout( () => {
    //console.log(data);
    this.emulatedList = data;
  }, 300);
});

Ответы [ 4 ]

0 голосов
/ 16 мая 2018

Вместо использования трубы используйте rxjs/add/operator/debounceTime как:

HTML 

<input [ngModel]='filterValue' (ngModelChange)='changed($event)' />

component.ts 

filterValue: string;
modelChanged: Subject<string> = new Subject<string>();

constructor() {
    this.modelChanged
        .debounceTime(500) // you can change time
        .distinctUntilChanged() // emit only when value is different from previous value
        .subscribe(value => {
            this.filterValue = value;
            // perform filter
        });
}

changed(text: string) {
    this.modelChanged.next(text);
}
0 голосов
/ 16 мая 2018

Вы можете использовать тайм-аут, так что код не будет запущен, пока не будет никаких запросов в течение x секунд

В приведенном ниже примере, хотя doFiltering вызывается в цикле 10 раз, оператор журнала консоли печатается только один раз, ровно через 1 секунду после завершения цикла 

let handle; 

for(var i = 0; i < 10; i++) {
    doFiltering();
}

function doFiltering() {
    // Check if there is a reference to running timeout
    if (handle != null) {
        // Cancel it
        clearTimeout(handle);
    }
    // Start a timeout
    handle = setTimeout(() => {
        // Do you filtering in here
        console.log("Filtering now");
        handle = null;
    }, 1000);
}
0 голосов
/ 16 мая 2018

Вы можете использовать debounceTime, если вы слушаете изменение значения.Не уверен, что вы используете [(ngModel)] или реактивную форму.Это должно быть что-то вроде: 

this.formCtrlSub = this.firstNameControl.valueChanges
  .debounceTime(1000)
  .subscribe(newValue => this.fetchNewResults());
0 голосов
/ 16 мая 2018

Вместо использования канала вы можете использовать таймер, чтобы дождаться, когда пользователь прекратит вводить, а затем отфильтровать результаты. 

timer: any;

getList(searchText) {
 if (searchText.length >= 3) {
  clearTimeout(this.timer);
  this.timer = setTimeout(() => {
  // filter here
  }, 1100);
} 
else {
  this.list= [];
 }
}
...