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

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

компонент.html

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

компонент.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?


dictionary angular rxjs tap switchmap
person shAkur    schedule 30.04.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

Взгляните на пример, когда я закомментировал 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>

person Józef Podlecki    schedule 30.04.2020