时间戳

首页 > 解决方案 > Rxjs switchMap 没有调用通过它传递的函数

angular - Rxjs switchMap 没有调用通过它传递的函数

问题描述

我正在使用Subject来自rxjs. 我从组件中调用了两种方法。

  1. 搜索
search(terms: Observable<string>) {
  return terms.pipe(
    debounceTime(400),
    distinctUntilChanged(),
    switchMap(term => {
      this.numberOfItems = API_INFO.PER_PAGE_ITEMS;
      return this.getPosts(term)
    })
  );
}
  1. 装载更多
loadmore(terms: Observable<string>, pageNumber) {
  this.numberOfItems = API_INFO.PER_PAGE_ITEMS * pageNumber;
  return terms.pipe(
    debounceTime(0),
    switchMap((term: string) => this.getPosts(term))
  )
}

组件订阅代码

this.homeService.search(this.searchLocation$)
      .subscribe((data)=>this.handleSuccess(data),(err)=>this.handleError(err))

问题是search工作正常，loadmore虽然他们都有相同的代码

PS：我对两个 observable 使用相同的订阅模型

标签： angularrxjsobservable

解决方案

您必须使用合并从两个可观察的数据中获取数据，一个来自搜索，另一个来自加载更多事件

loadmore 事件可以是滚动事件或按钮点击事件

<button #loadmore>Button</button>

...

@ViewChild('loadmore', { static: true }) button: ElementRef;
let loadmore$ = fromEvent(this.button.nativeElement, 'click');

...

merge(this.homeService.search(this.searchLocation$),
   this.homeService.loadmore(this.loadmore$, pageNumber))
.pipe(
  distinct()
).subscribe(
  (data)=>this.handleSuccess(data),
  (err)=>this.handleError(err)
)

推荐阅读