如何修复 Typescript 可订阅接口错误？答案

【问题标题】：How do I fix Typescript subcribable interface error?如何修复 Typescript 可订阅接口错误？
【发布时间】：2020-05-02 18:16:57
【问题描述】：

我正在尝试将生产 Angular 应用程序从 7 迁移到 8。当我尝试构建时，我收到以下错误：

ERROR in app/vehicle/vehicle.component.ts:90:36 - error TS2344: Type 'IOwnerVehicle' does not satisfy the constraint 'ObservableInput<any>'.
Property '[Symbol.iterator]' is missing in type 'IOwnerVehicle' but required in type 'Iterable<any>'.

90             flatMap<IVehicleOwner, IOwnerVehicle>(owner => {
                                      ~~~~~~~~~~~~~

  ../node_modules/typescript/lib/lib.es2015.iterable.d.ts:43:5
    43     [Symbol.iterator](): Iterator<T>;
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    '[Symbol.iterator]' is declared here.

我相信我已经在RXJS Subscribable documentation 的TypeScript Subscribable 接口问题主题 中找到了问题根源的线索。但我仍然不知道如何解决这个问题。

VSCode 显示车辆组件中没有错误。我以为 ts 文件后面的数字应该代表行和列，但组件只有 50 行长，第 36 行是空白的。

Subscribable 文档说“TypeScript 无法支持定义为符号属性的方法的接口。”，但 IOwnerVehicle 接口只是一个属性包。它没有方法。

与订阅有关的唯一代码是构造函数

   constructor(@Inject(MAT_DIALOG_DATA) private owner: IVehicleOwner,
      private svc: SearchService,
      private searchDlg: MatDialogRef<OwnerVehicleComponent, IOwnerVehicle>) {
      this.svc.getOwnerVehicles(owner.id.toString()).subscribe(
         list => {
            if (list.length > 0)
               this.list = list;
            else
               this.searchFailed = true;
         });
   }

服务再简单不过了

   getOwnerVehicles(vehicleId: string): Observable<IOwnerVehicle[]> {
      const url = `${this.webApi}/vehicle`;
      return this.http.get<IOwnerVehicle[]>(url,
         {params: {owner : vehicleId}});
   }

谁能帮我弄清楚我需要改变什么或我还需要看看其他地方吗？

【问题讨论】：

标签： angular typescript rxjs rxjs6

【解决方案1】：

我们来看看flatMap的类型：

declare function mergeMap<T, O extends ObservableInput<any>>(project: (value: T, index: number) => O, concurrent?: number): OperatorFunction<T, ObservedValueOf<O>>;

如您所见，flatMap 的第二个泛型扩展了 ObservableInput。所以在你的代码中，IOwnerVehicle 看起来是一个简单的接口，实际上应该是ObservableInput<IOwnerVehicle>。

所以只需将您的代码更改为：

flatMap<IVehicleOwner, ObservableInput<IOwnerVehicle>>(owner => {})

你应该可以在vehicle.component.ts line 90 column 36 中找到它

【讨论】：