时间戳

首页 > 解决方案 > Rxjs 根据两个 observable 更新列表

angular - Rxjs 根据两个 observable 更新列表

问题描述

所以基本上我要做的是更新一个数组来显示它，其中一个可观察对象是一个行为主题，它以一个空数组开始，然后它从 HTTP 请求中获取一个新值，另一个是事件发射器从 Angular 材质分页器中，如果第一个可观察对象获得新数组或第二个可观察对象发出事件来更改页面，则所需的行为是更新列表。

我尝试的第一件事是：

connect(): Observable<Transaction[]> {
     return this.paginator.page.pipe(
    map(() => {
       return this.list.pipe(map(t => this.getPagedData(t)));
    }),
    switchMap(m => m) // or mergeMap
);
}

它有点工作，问题是它第一次没有发出任何东西，因为它等待外部可观察者发出一些东西，然后它就工作了。

然后我尝试

return merge(this.list, this.paginator.page).pipe(
  map(x => this.getPagedData(x[0])),
);

但是这个似乎只在数组为空时第一次发出

标签： angulartypescriptrxjsangular-material

解决方案

您可以使用startWith运算符，即使源 observable 没有发出第一个值，它也会发出一个值（默认为 null）。

来自 RxJs 文档：

startWith - 返回一个 Observable，它在开始发射之前发射您指定为参数的项目。

所以你会有这样的东西

connect(): Observable<Transaction[]> {
   return this.paginator.page.pipe(
      startWith(),
      map(() => this.list.pipe(map(t => this.getPagedData(t))),
      switchMap(m => m) // or mergeMap
  );
}

推荐阅读