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

Question

我正在尝试将生产 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 订阅文档中的TypeScript 订阅接口问题主题中找到了问题根源的线索。 但我仍然无法弄清楚如何解决这个问题。

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}});
   }

有人可以帮我弄清楚我需要改变什么或我还需要看什么吗？

Answer 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行 90 列 36 中找到它