时间戳

首页 > 解决方案 > 类型'可观察的>' 不可分配给类型 'Observable<>'

angular - 类型'可观察的>' 不可分配给类型 'Observable<>'

问题描述

我有这个代码片段：

SubmitTransaction(transNumber: string, transactionRequest: ITransactionRequestObj): Observable<TransactionResponse> {
    this.body =  JSON.stringify(transactionRequest);
    this.headers = new HttpHeaders().set('Content-Type', 'application/json');
    this.headers.append('Accept', 'application/json');
    this.options = new RequestOptions({headers: this.headers});
    return this.http.post<TransactionResponse>(this.baseUrl + '/transactions/' + transNumber + '/new',  this.body, this.options)
   .pipe(catchError((e) => this.errorHandler(e)));
  }

我所做的只是将我的项目从 Angular 5 升级到 Angular 6 并更改.catch((e) => this.errorHandler(e));为 .pipe(catchError((e) => this.errorHandler(e)));. 但是，对于此特定方法，我收到以下 TypeScript 错误。

错误：

[ts]
Type 'Observable<HttpEvent<TransactionResponse>>' is not assignable to type 'Observable<TransactionResponse>'.
  Type 'HttpEvent<TransactionResponse>' is not assignable to type 'TransactionResponse'.
    Type 'HttpSentEvent' is not assignable to type 'TransactionResponse'.
      Property '_transactionNumber' is missing in type 'HttpSentEvent'.

我不确定在这种情况下我应该做什么。上面的代码片段在 Angular 5 中工作。我需要做什么才能为 Angular 6 修复它？

编辑：

errorHandler(error: HttpErrorResponse) {
      return throwError(error.message || 'Server Error');
  }

我注意到如果我不使用 HttpHeaders，它可以工作：

SubmitTransaction(transNumber: string, transactionRequest: ITransactionRequestObj): Observable<TransactionResponse> {
    this.body =  JSON.stringify(transactionRequest);
    this.headers = new HttpHeaders().set('Content-Type', 'application/json');
    this.headers.append('Accept', 'application/json');
    this.options = new RequestOptions({headers: this.headers});
    return this.http.post<TransactionResponse>(this.baseUrl + '/transactions/' + transNumber + '/new',  transactionRequest)
    .pipe(catchError((e) => this.errorHandler(e)));
  }

但是，我可能需要使用 HttpHeaders ...在这种情况下有什么解决方法？

标签： angulartypescriptangular6rxjs6

解决方案

HttpHeaders是不可变的数据结构。

该方法append返回一个新实例HttpHeaders而不是改变现有实例，这意味着您需要对代码进行微小的更改。

// old
this.headers.append('Accept', 'application/json')

// new
this.headers = this.headers.append('Accept', 'application/json')

更好的是，一次完成所有操作：

this.headers = new HttpHeaders()
  .set('Content-Type', 'application/json')
  .set('Accept', 'application/json')

推荐阅读