错误类型错误：无法读取未定义的属性（读取“openSnackBar”）答案

【问题标题】：ERROR TypeError: Cannot read properties of undefined (reading 'openSnackBar')错误类型错误：无法读取未定义的属性（读取“openSnackBar”）
【发布时间】：2021-11-22 22:15:41
【问题描述】：

昨天我遇到了这个问题，从那以后我就无法处理了。

我有触发 http get 请求的服务。如果出现错误，我想显示MatSnackBar。但是我有很多这样的服务，所以我决定为小吃店创建服务。然后我只注入我的snackbarService 并显示消息。但我不知道为什么，它不起作用。

HttpService

this._http.get<IObjectNumber[]>(this.formatUrl()).subscribe(
            (data) => {
                this.formatData(data, tempSeries, tempLabels);
                this.createChart(tempSeries, tempLabels);
                this.updateChart();
            },
            (err) => this.catchError(err)
        );

catchError(err): void {
    this._sbService.openSnackBar('Error', 'Close');
}

snackBarService

import { Injectable } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';

@Injectable({
    providedIn: 'root',
})
export class SnackBarService {
    constructor(private _snackBar: MatSnackBar) {}

    openSnackBar(message: string, action: string): void {
        this._snackBar.open(message, action, {
            duration: 2000,
            panelClass: ['snackbar'],
        });
    }
}

Error 指向HttpService 中的catchError 方法。我确保在我的模块中导入MatSnackBarModule。

你能帮我解决这个问题吗？

【问题讨论】：

您能否更具体地说明您所期望的错误类型，因为您的代码进入了 500 和 400 响应代码的错误块。

标签： angular angular-material

【解决方案1】：

由于您的catchError 方法不是实例方法，您需要绑定this 才能访问任何实例变量。只需更改您的代码：

this.catchError(err)

到

this.catchError(err).bind(this)

或者，您可以将 catchError 设为实例方法，只需将其从调用 API 的方法中取出即可。

【讨论】：