Angular Material Snackbar не открывается при вызове внутри метода обработки ошибок

У меня есть обработка ошибок на уровне обслуживания для моих запросов API. Это прекрасно работает, за исключением того, что я хочу иметь возможность уведомлять пользователей о том, что что-то пошло не так в пользовательском интерфейсе, кроме сообщений консоли. Я подумал, что Material Snackbars отлично подойдет для этого.

После некоторых исследований оказалось, что Angular HttpClient работает за пределами зоны, поэтому я обернул свой метод snackbar.open() таким образом, чтобы решить проблему:

  //POST METHOD
  ///////////////////////////////////////////////////////////////////////////
  addNewCategory(category: CreateCategory): Observable<CreateCategory> {
    return this.http
    .post<CreateCategory>(this.url + "/create", category)
    .pipe(catchError(this.handleError));
  }

  //ERROR HANDLING METHOD
  ///////////////////////////////////////////////////////////////////////////
  private handleError(errorResponse: HttpErrorResponse) {
    if (errorResponse.error instanceof ErrorEvent) {
      console.log("Client Side Error: ", errorResponse.error.message);
    } else {
      console.log("Server Side Error: ", errorResponse);
      this.openSnackbar("Category Not Added.");
    }

    return throwError("There is an issue with the call.);
  }

  //SNACK BAR METHOD
  ///////////////////////////////////////////////////////////////////////////
  openSnackbar(snackMessage: string) {
    this.zone.run(() => {
      this._snackBar.open(snackMessage, "Close", {
        duration: 7000
      });
    });
  }

К сожалению, это по-прежнему дает те же результаты. Предположительно, приведенное выше исправление действительно работало в какой-то момент, см. на">здесь.

Я также пытался выполнить обработку ошибок в компоненте, что, насколько я понимаю, является неправильной практикой, но я все равно получил те же результаты даже с исправлением зоны. Вот сообщение об ошибке, которое я получаю в консоли, когда закусочная пытается запуститься:

core.js:1673 ERROR TypeError: this.openSnackbar is not a function
at CatchSubscriber.push../src/app/services/people-category.service.ts.PeopleCategoryService.handleError [as selector] (people-category.service.ts:93)
at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:83)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:61)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:83)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:61)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/OuterSubscriber.js.OuterSubscriber.notifyError (OuterSubscriber.js:13)
at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._error (InnerSubscriber.js:18)
at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:61)
at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)

Любое понимание будет оценено! Спасибо!


person CAlex    schedule 19.10.2018    source источник
comment
Используйте этот синтаксис .pipe(catchError(this.handleError.bind(this))); или определите обратный вызов как функцию стрелки: private handleError = (errorResponse: HttpErrorResponse) => { ... }.   -  person ConnorsFan    schedule 20.10.2018
comment
@ConnorsFan Это работает, и это именно то, что я искал. Я не большой специалист по javascript, поэтому я точно не знал, что искать, когда столкнулся с этой проблемой. Я ценю, что вы связали этот пост, это помогло мне лучше понять, что происходит.   -  person CAlex    schedule 20.10.2018