ngx-select-dropdown, как включить debounceTime? - PullRequest
Новая
       18

ngx-select-dropdown, как включить debounceTime?

0 голосов
/ 20 января 2020

Мне нужно, чтобы мой массив [options] заполнялся динамически, как только пользователь закончил печатать, мне нужно сделать вызов API и получить список параметров.

Чтобы избежать нескольких вызовов API, я хотел бы использовать что-то вроде rx js debounceTime(1000);

Есть ли способ использовать debounceTime? Или есть другие рекомендуемые варианты для использования?

Ответы [ 2 ]

1 голос
/ 20 января 2020

Вы можете использовать этот трюк, используя буфер и вызов API вместо ajax

import { fromEvent, timer } from 'rxjs';
import { debounceTime, map, buffer, switchMap } from 'rxjs/operators';

let input = document.getElementById('example');
let input$ = fromEvent(input, 'keyup');

let breakWhen$ = timer(1000);
let debounceBreak$ = input$.pipe(
debounceTime( 2000 )
);

let stream$ = input$.pipe(
  map( ev => ev.key),
  buffer(debounceBreak$),
  switchMap((allTypedKeys) => {
  // do ajax
  console.log('Everything that happened during 2 sec', allTypedKeys)
  return of('ajax based on ' + input.value);
});
);

stream$.subscribe((data) => console.log( 'values',data ));
0 голосов
/ 22 января 2020

Как и в упомянутом Наврузбеке, «ngx-mat-select-search» можно использовать для поиска по выпадающему списку на стороне сервера.

Однако, если вы хотите использовать вашу текущую библиотеку и добавить к ней debounceTime, можно использовать обходной путь. предмет. Как предложено { ссылка }

Решение, которое работало для меня: 

searchTextChanged=new Subject<string>();

// make the server-side call in the subscrivbe function
ngOnInit() {
  this.searchTextChanged.pipe( debounceTime(1000), distinctUntilChanged())  .subscribe((value)=> this.outerValuedChanged(value));
}

addressSearchChanged(searchText: string) {
  if (searchText.length >=3) {
    this.searchTextChanged.next(searchText);
  }
}

// dummy function
outerValuedChanged(value: string) {
  console.log('value:', value);
  return 'test';
}
<ngx-select-dropdown (searchChange)="addressSearchChanged($event)" formControlName="inputAddressFormControl" [multiple]="false" [config]="config" [options]="addressList"></ngx-select-dropdown>
...