类型'Observable'不能分配给'Observable'类型 “

Question

目前正在通过Deborah Kurata course on Angular 6

我已经完成了Observables模块，但遇到了我的products.service中的跟随错误。

我找到了this answer here，但我已经做到了，并且不相信这实际上是针对这里遇到的问题。

我也在这里找到了这个问题，但修复不起作用：https://github.com/angular/angular/issues/20349

该修复假设只是return Rx.Observable.of但of没有Observable。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError, tap } from 'rxjs/operators';
import { Observable } from 'rxjs';

// Interfaces
import { IProduct } from './product';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private productUrl = 'api/products/products.json';

  constructor(private http: HttpClient) {}

  getProducts(): Observable<IProduct[]> {
    return this.http.get<IProduct[]>(this.productUrl).pipe(
      tap(data => console.log('All: ' + JSON.stringify(data)))
    );
  }
}

---

我发现如果我只是将Observable的类型更改回代码传递，但我觉得这是一个骗子，我失去了Typescript的好处：

getProducts(): Observable<any> {
  return this.http.get<IProduct[]>(this.productUrl).pipe(
    tap(data => console.log('All: ' + JSON.stringify(data))),
    catchError(this.handleError)
  );
}

Answer 1

您基本上可以将鼠标悬停在.pipe上以检查它的返回值。

.tap只是返回它得到的东西。但我认为，catchError可能会回归Object。这就是为什么它的返回类型被假设为Observable<{}|IProduct[]>。

修复1.在这种情况下使用它。

getProducts(): Observable<{}|IProduct[]> {
  return this.http.get<IProduct[]>(this.productUrl).pipe(
    tap(data => console.log('All: ' + JSON.stringify(data))),
    catchError(this.handleError)
  );
}

在接收组件中，您可能希望这样做：

products => { this.products = products as IProduct[] };

修复2.如果您不想更改返回类型，然后修改您订阅此可观察对象的代码，请在此处删除catchError：

getProducts(): Observable <IProduct[] > {
  return this.http.get < IProduct[] > (this.productUrl).pipe(
    tap(data => console.log('All: ' + JSON.stringify(data)))
  );
}

修复3.或者只是首先摆脱.pipe。无论如何，你正在使用.tap进行记录。因此，它不会为您的代码添加任何值。就捕获错误而言，你可以在HttpInterceptor中或在你将成为这个方法返回的地方的subscribing那里做到这一点。

getProducts(): Observable<IProduct[]> {
  return this.http.get<IProduct[]>(this.productUrl);
}