运算符函数<未知，未知>缺少类型"可观察"中的以下属性：_isScalar、源、运算符、

Question

在Angular中为HTTP请求实现getProducts((方法时遇到问题。我将observable设置为匹配我的接口Observable<IProduct[]>，以从productUrL获取并返回JSON文件中的产品，但它抛出了一个错误：

Type 'OperatorFunction<unknown, unknown>' is missing the following properties from 
type 'Observable<IProduct[]>': _isScalar, source, operator, lift, and 6 more.  

这是product.service.ts

export class ProductService {
public productUrl = "/api/products/roducts.json"
constructor(private http: HttpClient) { }
getProducts(): Observable<IProduct[]> {
return this.http.get<IProduct[]>(this.productUrl)
.pipe(
tap(data => console.log("All: " + JSON.stringify(data)))),
catchError(this.handleError)
}
private handleError(err: HttpErrorResponse){
let errorMessage = "";
if(err.error instanceof ErrorEvent){
errorMessage = "An error occured " +err.error.message; 
}
else{
errorMessage = "Server returned core " + err.status +" error message is " + err.message 
}
console.error(errorMessage)
return throwError(errorMessage)
}
}

这里是produst-list.component，它正在调用方法onInit

errorMessage: string;
products: IProduct[] = [];
ngOnInit() {
this.productService.getProducts().subscribe({
next: products => this.products = products,
error: err => this.errorMessage = err
});

Answer 1

.pipe(
tap(data => console.log("All: " + JSON.stringify(data))),
catchError(this.handleError)
)

试试这个，乍一看，catchError应该在管道中。

Answer 2

您得到的错误很可能是因为这一行：

tap(data => console.log("All: " + JSON.stringify(data))))

您可以使用箭头函数(或匿名函数(，但必须记住，如果您没有将代码放在括号{}中，则意味着您将返回此代码的结果。这意味着，您的代码与相同

tap(data => {
return console.log("All: " + JSON.stringify(data)))
}
);

我也在谈论这个：

next: products => this.products = products,
error: err => this.errorMessage = err