使用“ finalize,catcherror”运算符时出错

时间:2019-03-09 18:54:18

标签: angular rxjs

我正在尝试使用由角度大学提供的出色示例来实现角度数据表。但是我坚持实现我的数据源。这是我的数据源:

import { Aircraft } from '../shared/aircraft';
import { AircraftInfoService } from './aircraft-info.service';
import { BehaviorSubject } from 'rxjs';
import { CollectionViewer, DataSource } from '@angular/cdk/collections';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/catchError';
import 'rxjs/add/operator/finalize';

export class allAircraftInfoDataSource implements DataSource<Aircraft> {

  private aircraftDBSubject = new BehaviorSubject<Aircraft[]>([]);
  private loadingSubject = new BehaviorSubject<boolean>(false);

  public loading$ = this.loadingSubject.asObservable();

  constructor(private aircraftInfoService: AircraftInfoService) {}

  connect(collectionViewer: CollectionViewer): Observable<Aircraft[]> {
      return this.aircraftDBSubject.asObservable();
  }

  disconnect(collectionViewer: CollectionViewer): void {
      this.aircraftDBSubject.complete();
      this.loadingSubject.complete();
  }

  getAircraft() {

      this.loadingSubject.next(true);

      this.aircraftInfoService.getAircraft().pipe(
        catchError(() => **of**([])),
        finalize(() => this.loadingSubject.next(false))
    )
    .subscribe(data => this.aircraftDBSubject.next(data));      
  }    
}

我在“ catchError”,“ of”,“ finalize”上遇到错误,第二次使用“ data”产生了错误。这是我的编译错误:

ERROR in ../../src/app/services/aircraft-info-datasource.service.ts(31,9): error TS2552: Cannot find name 'catchError'. Did you mean 'RTCError'?
../../src/app/services/aircraft-info-datasource.service.ts(31,26): error TS2304: Cannot find name 'of'.
../../src/app/services/aircraft-info-datasource.service.ts(32,9): error TS2304: Cannot find name 'finalize'.
../../src/app/services/aircraft-info-datasource.service.ts(34,52): error TS2345: Argument of type '{}' is not assignable to parameter of type 'Aircraft[]'.
  Type '{}' is missing the following properties from type 'Aircraft[]': length, pop, push, concat, and 26 more.

我以为我遵循了信件中的例子,但显然我遗漏了一些东西。我需要纠正什么?

谢谢.....

2 个答案:

答案 0 :(得分:1)

您要导入RxJS 5“补丁样式”运算符,并尝试将它们用作RxJS 6“可插值运算符”(catchError在RxJS 5中也曾称为catch)。

import { of } from 'rxjs';
import { catchError, finalize } from 'rxjs/operators';

有关迁移文档,请参阅:

答案 1 :(得分:0)

您需要从catchError导入rxjs/operators符号:

import { catchError, finalize } from 'rxjs/operators';

请查看here,以详细了解v6 +中rxjs带来的新变化。