类型 'Observable<HttpEvent<>>' 不可分配给类型 'Observable<>'答案

【问题标题】：Type 'Observable<HttpEvent<>>' is not assignable to type 'Observable<>'类型 'Observable<HttpEvent<>>' 不可分配给类型 'Observable<>'
【发布时间】：2019-01-12 05:16:03
【问题描述】：

我有这个代码sn-p：

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'.

我不确定在这种情况下我应该做什么。上面的代码 sn-p 在 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...在这种情况下，解决方法是什么？

【问题讨论】：

请发布您的errorHandler代码
@firegloves 已编辑帖子。
我认为 HttpHeaders 是不可变的，你应该将一些 set 方法链接在一起而不是 append
使用 Angular 6 / RxJs 6，没有必要在请求体上使用 JSON.stringify()。添加到上述响应中，标头是不可变的，因此每次调用 append 都会返回一个新的标头对象实例。您在函数调用中创建的大多数实例并不是真正必需的。你这样做有什么特别的原因吗？您是否尝试缓存这些变量以供以后使用？

标签： angular typescript angular6 rxjs6

【解决方案1】：

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')

【讨论】：

谢谢。但是，我仍然遇到同样的错误。这个怎么样：this.options = new RequestOptions({headers: this.headers}); ?它是否正确？它抱怨将 this.options 添加到帖子中

【解决方案2】：

在 Angular 6 上运行此代码 sn-p，RxJS 6 会触发请求而不会出现上述错误。它应该为您提供与上面的代码完全相同的结果：

SubmitTransaction(transNumber: string, transactionRequest: TransactionRequest): Observable<TransactionResponse> {
    return this.http
      .post<TransactionResponse>(`/myurl/transactions/${transNumber}/new`, transactionRequest, { headers: new HttpHeaders()
          .set('Accept', 'application/json') })
      .pipe(
        catchError(error => throwError(error.message || 'Server Error'))
      );
  }

我已将代码简化为不创建实例 RequestOptions，将此过程留给 HttpClient 的后期预处理流程，该流程会根据提供的哈希为您创建实例。

我还从您的方法调用中删除了对正文、标头和选项的缓存。随意将它们与从 post 调用中声明的选项哈希中提取的变量一起添加回来，但是，除非您打算缓存这些变量，否则实际上没有必要这样做。

【讨论】：