在 combineLatest 中跟踪 observables

Question

我继承了一个使用 combineLatest 的代码库，我正在尝试找出是否有一种方法可以跟踪内部可观察对象以向 UI 提供状态更新，因为这是一个很长的运行过程（即大于几秒）。

我是 angular 和 rxjs 的新手 - 我正在查看的代码如下。

我认为这不需要使用 combineLatest，因为所有三个都是 http 请求，因此不会返回多个值。

是否有更好的选项供我使用，以便我可以轻松跟踪状态并更新 UI？

private vehiclesWithIssueData$() {
    let result = combineLatest(this.vehicles$, this.vehicleSpecs$, this.visInspMonData$()).pipe(
        map(w => Array.from(w[0].entries()).map(v => {
            let [vehicleId, vehicle] = v;
            let [vehicleMap, vehSpecMap, monitoringMap] = w;
            let monIssues = monitoringMap.get(vehicleId) || [];
            let spec = vehSpecMap.get(vehicle.specificationId);

            return <IDisplayVehicle>{
                serialNo: vehicle.serialNo,
                altText: monIssues.map(m => m.issueText).join("\n") || "No issues",
                application: spec?.vehicleApplication || "unknown",
                model: spec?.model || "unknown"
            };
        })),
    );
    return result;
}

Answer 1

您可以在地图前添加一个点击运算符，然后您可以在其中查看流中的数据。作为提示，在使用 combineLatest 时避免使用索引，因为它可能会在将来导致问题并且难以维护。（例如数据可能会被更改并且您的索引将失效）

Answer 2

在您的情况下，您可以使用许多 RxJS 辅助函数，例如 combineLatest, forkJoin, and concat，因为所有内部 Observable(s) 都是您提到的 HTTP 请求，它们将在发出它们后直接完成值。

并且要跟踪组合的 Observable(s) 中的每一个，您可以对它们中的每一个使用 tap 运算符，以 enable/disable 加载或任何您需要的。

您可以尝试以下操作：

// import { tap } from 'rxjs/operators';

const result = combineLatest(
  this.vehicles$.pipe(tap((vehicles) => console.log(vehicles))),
  this.vehicleSpecs$.pipe(tap((vehicleSpecs) => console.log(vehicleSpecs))),
  this.visInspMonData$().pipe(
    tap((visInspMonData) => console.log(visInspMonData))
  )
)

// ...

阅读 Angular 中关于 Observables 和 RxJS 的更多信息： https://angular.io/guide/observables

在 combineLatest 中跟踪 observables

Track observables in combineLatest

rxjs

angular