2

服务.ts 文件

版本 5 代码：

return this.connectionListStoreService.connections$.pipe(
  combineLatest(this.isLoadPending$),
  filter(([connections, isPending]) => !isPending),
  map(([connections]) => connections),
  combineLatest(
    this.adapterStoreService.adapters$,
    this.applicationsStoreService.applications$
  ),
  map(([connections, adapters, applications]) => {
    if (!connections || !adapters || !applications) {
      return;
    }

    return connections
      .filter(connection => connection.source && connection.destination)
      .map((connection) => ({
        ...connection,
        source: {
          ...connection.source,
          adapter: adapters.find((item) => item.id === connection.source.appTypeId),
          application: applications.find((item) => item.id === connection.source.applicationId)
        },
        destination: {
          ...connection.destination,
          adapter: adapters.find((item) => item.id === connection.destination.appTypeId),
          application: applications.find((item) => item.id === connection.destination.applicationId)
        }
      }))
      .filter(({ source, destination }) =>
        source.application && source.adapter && destination.application && destination.adapter);
  })
);

版本 6 代码：

return combineLatest([this.connectionListStoreService.connections$, this.isLoadPending$]).pipe(
  filter(([connections, isPending]) => !isPending),
  map(([connections]) => connections),
  combineLatest([this.adapterStoreService.adapters$, this.applicationsStoreService.applications$]),
  map(([connections, adapters, applications]) => {
    if (!connections || !adapters || !applications) {
      return;
    }

    return connections
      .filter(connection => connection.source && connection.destination)
      .map((connection) => ({
        ...connection,
        source: {
          ...connection.source,
          adapter: adapters.find((item) => item.id === connection.source.appTypeId),
          application: applications.find((item) => item.id === connection.source.applicationId)
        },
        destination: {
          ...connection.destination,
          adapter: adapters.find((item) => item.id === connection.destination.appTypeId),
          application: applications.find((item) => item.id === connection.destination.applicationId)
        }
      }))
      .filter(({ source, destination }) =>
        source.application && source.adapter && destination.application && destination.adapter);
  })
)

我将这段旧代码修改为一些在线指南的新代码。我面临嵌套combineLatest在此函数中的问题：

错误：

@deprecated — 不再支持 resultSelector，而是通过管道映射

'Observable<[AdapterModel[], ApplicationModel[]]>' 类型的参数不可分配给'OperatorFunction<unknown, unknown>' 类型的参数。

类型 'Observable<[AdapterModel[], ApplicationModel[]]>' 提供不匹配的签名'（来源：Observable）：Observable'.ts(2345)

RXJS 版本：“6.6.3”，

让我知道我这边是否需要任何其他信息。提前致谢。

4

2 回答 2

1

你确定你导入的是正确的combineLatest？您需要从以下位置导入一个rxjs，再从以下位置导入另一个rxjs/operators：

import { combineLatest as combineLatestWith } from 'rxjs';
import { combineLatest } from 'rxjs/operators';

...

combineLatestWith([...]).pipe(
  ...
  combineLatest([...]),
)

我知道，这很令人困惑，它即将在 RxJS 7 中再次发生变化。

顺便说一句，这里曾经有官方迁移文档，master由于某种原因从 repo 的分支中删除：https ://github.com/ReactiveX/rxjs/blob/6.x/docs_app/content/guide/v6/migration.md

于 2020-11-13T13:53:49.310 回答
0

您可以尝试将combineLatest运算符替换为withLatestFrom，但查看您的流，我会进行以下更改。我将从 observable 开始，并使用operatorisPending$切换并使用该函数组合多个 observables。switchMapcombineLatest

尝试以下

import { combineLatest } from 'rxjs';
import { filter, switchMap, map } from 'rxjs/operators';

return this.isPending$.pipe(
  filter(isPending => !isPending),
  switchMap(_ => 
    combineLatest(
      this.connectionListStoreService.connections$,
      this.adapterStoreService.adapters$,
      this.applicationsStoreService.applications$
    )
  ),
  map(([connections, adapters, applications]) => {
    ...
  })
);

这里使用了combineLatest来自 RxJS v6+ 的函数，而不是旧的combineLatest操作符。

于 2020-11-13T14:34:47.497 回答