Question

我有一个可观察的userInput$，当用户键入要输入的内容时，它每N秒返回一次数据流。我想接收最新的输入并将其作为参数传递给函数service.search(x)，该函数将返回另一个可观察到的数据列表。

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

为什么我的代码不起作用？

我的userInput$返回一个string我的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

您已将userInput $的输出通过管道传递给withLatestFrom，但是subscription仍然不知道要提供什么作为输出。在这里，您需要映射您的输出。

尝试一下。

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));

Answer 2

两个观察结果：

首先，除非您的代码示例是错字，否则实际上并没有传递到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包装。

Rxjs运算符withLatestFrom无法正常工作

2 个答案: