如何在 Angular 的 Rxjs 6 中使用运算符

Question

我需要一些关于 Rxjs Operators 的帮助。我在 Angular 6 项目中工作。 Rxjs 版本为 6.1.0 我在导入 Rxjs Operator 时遇到了问题。所以我执行这个声明，希望能解决我的问题。

Statement: npm install --save rxjs-compat

这是我的组件代码。

import { AppError } from './../common/validators/app-error';
import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import { Observable } from "rxjs";
import { catchError, map } from "rxjs/operators";
import { HttpClient, HttpErrorResponse } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})
export class PostService {

  deletePost(id) {
    return this.http.delete(this.url + '/' + id)
      .pipe(
        map(res => res),
        catchError((error: HttpErrorResponse) => {
          Observable.throw(new AppError());
        }));
  }

  private url = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: Http) { }

}

编译成功后出现此错误。

    i ｢wdm｣: Compiled successfully.
ERROR in src/app/services/post.service.ts(18,20): error TS2345: Argument of type '(error: HttpErrorResponse) => void' is not assignable to parameter of type '(err: any, caught: Observable<Response>) => ObservableInput<{}>'.
  Type 'void' is not assignable to type 'ObservableInput<{}>'.

如何成功使用 Rxjs？这里有什么问题。

Answer 1

您现在必须在pipe 函数中使用catchError，如下所示：

deletePost(id) {
  return this.http.delete(this.url + '/' + id)
    .pipe(
       map(res => res),
       catchError((error: HttpErrorResponse) => {
         return Observable.throw(new AppError());
       }));
}