类型'Observable <httpevent <>>'不可分配给类型'Observable <>'

时间:2018-08-04 16:11:42

标签: angular typescript angular6 rxjs6

我有以下代码段:

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 ...在这种情况下,解决方法是什么?

2 个答案:

答案 0 :(得分: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')

答案 1 :(得分:0)

在Angular 6上运行此代码段,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调用中声明的options哈希中提取的变量一起添加回去,但是,除非您打算缓存这些变量,否则确实不需要这样做。