Rxjs оператор withLatestFrom не работает должным образом

Question

У меня есть наблюдаемое userInput$, которое возвращает потоки данных каждые N секунд, когда пользователь вводит данные для ввода.Я хочу получить последний ввод и передать его в качестве параметра функции service.search(x), которая будет возвращать другую наблюдаемую со списком данных.

this.userInput$
  .pipe(withLatestFrom(x => this.service.search(x)))
  .subscribe(x => {
    //do not receiving any data here
  });

Любой, почему мой код не работает?

My userInput$ return a string my this.service.search(x) возвращает массив - это то, что я хочу получить в результате.

ОБНОВЛЕНИЕ:

const example = this.userInput$
  .pipe(withLatestFrom(x => this.service.search(x)),
  map(([userInput, searchOutput ]) => { // error here
    return {query: userInput, result: searchOutput};
  })
);

[userInput, searchOutput] -получение ошибки [ts] Type 'Observable<GetSearch[]>' is not an array type. [2461]

Только для теста изменено this.service.search(x) на of(x)

const example = this.userInput$
  .pipe(withLatestFrom(x => of(x)),
  map(([userInput, searchOutput ]) => { // error here
    return {query: userInput, result: searchOutput};
  })
);

map, возвращающее ошибку [ts] Type 'Observable<any>' is not an array type. [2461]

Answer 1

Два наблюдения:

Во-первых, вы на самом деле не работаете с map, если ваш пример кода не является опечаткой, вместо этого он должен выглядеть так:

const example = this.userInput$.pipe(
  withLatestFrom(x => this.service.search(x)),
  map(([userInput, searchOutput ]) => {
    return {query: userInput, result: searchOutput};
  })
);

Второе, withLatestFrom предназначено для предоставления последних значений, излучаемых поставляемой наблюдаемой (-ыми) не полученной (-ыми), и реагирует на изменения наблюдаемой в восходящем направлении, которые больше похожи на switchMap.Рассмотрите это вместо этого:

const example = this.userInput$.pipe(
  switchMap(x => this.service.search(x).pipe(
    map(searchOutput => {
      return {query: x, result: searchOutput};
    })
  )),
);

Обратите внимание, что это предполагает, что this.service.search возвращает ответ Observable.Если это не так, вам нужно будет обернуть from или of для фактического типа возврата search.

Answer 2

Вы перенаправили вывод из userInput $ в withLatestFrom, но подписчик все еще не знает, что предоставить в качестве вывода.Здесь вам нужно отобразить ваш вывод.

Попробуйте это.

const example = this.userInput$
  .pipe(withLatestFrom(x => this.service.search(x)),
  map(([userInput, searchOutput ]) => {
    return {query: userInput, result: searchOutput};
  })
);
const subscribe = example.subscribe(val => console.log(val.result));