angular - RxJs 合并算子获取最新数据并使用扫描算子进行累积

问题描述

我正在研究角度和 RxJs。我有一个组件来显示基于日期和仓库选择的路线，以及该子组件中的一个表单来添加路线。我创建了一个计划服务，它被注入到两个组件中。列表组件订阅 getLatestRoutesForDateDepo$ 并且表单组件保存新路由。当我第一次选择新的日期仓库并添加路线时效果很好。现在的问题是，当我更改日期和 depo 扫描过滤器时也会聚合以前的数据并从列表中获取数组。下面是代码。

export class RoutePlannerService {

  constructor(routeClient:RouteClient) { }

  private dateDepoSubject = new Subject<{date:Date,depo:DepoResource}>();
 initialize(date:Date,depo:DepoResource){
    this.dateDepoSubject.next({date,depo});
  }


  private getRoutesForDateDepo$ = this.dateDepoSubject.pipe(
    switchMap(schedule =>  this.routeClient.getRoutesByDateAndDepo(schedule.date,schedule.depo.id))
  );

 
  private addRouteSubject = new Subject<CreateRoute>();
  saveRoute(route:CreateRoute){
    this.addRouteSubject.next(route);
  }

  getLatestRoutesForDateDepo$ = merge(this.getRoutesForDateDepo$,
    this.addRouteSubject.asObservable().pipe(
      // Save the operation to the backend
      concatMap(action => this.sendHttpRequest(action))
    ))
.pipe(
      scan((routes: RouteResource[], route: RouteResource) => {
        debugger;
          return [...routes, route];
      })
    );

  private sendHttpRequest(route: CreateRoute): Observable<RouteResource> {
    return this.routeClient.post(route)
                      .pipe(
                        catchError(err => {
                          return EMPTY;
                        })
                        ));
  }
}

路线列表

routes$ = this.routePlannerService.getLatestRoutesForDateDepo$;

search() {
 this.routePlannerService.initialize(new Date(this.date), this.depo)
}

路线表格

  save(route: RouteResource): void {
    this.routePlannerService.saveRoute(data);
  }

标签： angularrxjs

感谢您的堆栈闪电战。这很有帮助。

在你的应用程序中尝试这样的事情：

scan((routes: RouteResource[], route: RouteResource) => {
  if (Array.isArray(route)) {
    return route;
  }
  return [...routes, route];
})

如果扫描的第二个参数是一个数组，则返回该数组。否则，它将发出的路由添加到数组中。

更新的 stackblitz 在这里：https ://stackblitz.com/edit/angular-ivy-eckbag

让我知道这是否适合你。

angular - RxJs 合并算子获取最新数据并使用扫描算子进行累积

问题描述

解决方案

推荐阅读