switchMap с пустым значением - PullRequest
Новая
       105

switchMap с пустым значением

0 голосов
/ 30 апреля 2020

Я использую ng-select пользовательский поиск на стороне сервера для загрузки данных в зависимости от того, что пользователь вводит. В настоящее время это работает, только если ключевое слово действительно нажато. Я бы хотел запускать http-запрос каждый раз, когда раскрывающийся список открывается, даже если поисковый термин пустой

component. html

<ng-select [items]="filterValues$ | async"
    [typeahead]="filterValuesInput$"
    [multiple]="true"
    (open)="getFilterValues(pref.id)"
    [loading]="filterValuesLoading"
    bindLabel="name"
    [(ngModel)]="filter_values">
</ng-select>

component.ts 

getFilterValues(filterId) {
    this.filterValues$ = concat(
      of([]), // default items
      this.filterValuesInput$.pipe(
        distinctUntilChanged(),
        tap(() => this.filterValuesLoading = true),
        switchMap(term => this.service.getFilterValues(filterName, '' + term).pipe(
          map(res => res.filter_values),
          catchError(() => of([])), // empty list on error
          tap(() => this.filterValuesLoading = false)
        ))
      )
    );
}

Я пытаюсь понять, как switchMap () инициирует запрос только после ввода значения ввода. Как заставить его вызывать метод службы каждый раз, когда вызывается метод getFilterValues?

1 Ответ

0 голосов
/ 30 апреля 2020

switchMap () запускает запрос только после того, как введено вводимое значение.

Я думаю, что функция distinctUntilChanged является виновником.

в соответствии с документами switchMap() отменяет только предыдущие obervables.

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

const subject = new rxjs.Subject();

const obs = subject.pipe(
  //rxjs.operators.distinctUntilChanged(),
  rxjs.operators.switchMap(value =>
    rxjs.of("apples", "bananas", "oranges").pipe(
      rxjs.operators.filter(pr => pr.includes(value))
    )
  )
);

const subscription = obs.subscribe(value => {
  console.log(value);
});

var selectEl = document.getElementById("select");
selectEl.addEventListener("click", filter);
selectEl.addEventListener("change", filter);

function filter(event) {
  subject.next(event.target.value)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.js"></script>
<select id="select">
  <option>a</option>
  <option>b</option>
</select>
...