ОШИБКА TypeError: Невозможно прочитать свойство 'openDialogTEST' из неопределенного

Question

Я пытаюсь сделать всплывающее диалоговое окно всякий раз, когда я получаю сообщение об ошибке от myerrorhandler, я вижу вызов console.error(this.explanation), но не this.dialogbox.openDialogTEST();

это мое сообщение об ошибке

ОШИБКА TypeError: Невозможно прочитать свойство 'openDialogTEST' с неопределенным значением

странная часть, если я позвоню с помощью кнопки, все в порядке. Это мои занятия:

usertable.component.ts

  connect(): Observable<Installation[]> {

    return this.authservice.GetInstallation();
  }

auth.service.ts

  GetInstallation(): Observable<Installation[]> {
    return this.GetServiceProviderId().pipe(
      flatMap(info => {
        return this.http.get<Installation[]>
          (this.rooturl +
          "installation/?serviceproviderid=" +
          info.ServiceProviderId,
          { headers: this.reqHeader })
      }),
       catchError(this.myerrorhandle.handleError)
    )
  }

myerrorHandle.ts

 handleError(errorResponse: HttpErrorResponse) {

    switch (errorResponse.status) {
      case 401: {
        console.error(errorResponse.url, errorResponse.status, errorResponse.statusText)
        this.explanation = "The request has not been applied because it lacks valid authentication credentials for the target resource."
        console.error(this.explanation)
        this.dialogbox.openDialogTEST();
        break;
      }

dialogbox.component.ts

  openDialogTEST(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log("after close")
    });
  }

полное сообщение об ошибке:

ОШИБКА TypeError: Невозможно прочитать свойство 'openDialogTEST' из неопределенного в CatchSubscriber.push ../ src / app / myerrorHandle.ts.myerrorHandle.handleError [как селектор] (myerrorHandle.ts: 29) на CatchSubscriber.push ../ node_modules / rxjs / _esm5 / internal / operator / catchError.js.CatchSubscriber.error (catchError.js: 33) в MergeMapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._error (Subscriber.js: 80) в MergeMapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.error (Subscriber.js: 60) в MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._error (Subscriber.js: 80) в MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.error (Subscriber.js: 60) в FilterSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._error (Subscriber.js: 80) в FilterSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.error (Subscriber.js: 60) в MergeMapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / OuterSubscriber.js.OuterSubscriber.notifyError (OuterSubscriber.js: 13) в InnerSubscriber.push ../ node_modules / rxjs / _esm5 / internal / InnerSubscriber.js.InnerSubscriber._error (InnerSubscriber.js: 18)

Answer 1

Используйте Сервис для обработки диалога, подобного этому:

Пожалуйста, ознакомьтесь с Демо для более подробной информации

DEMO

dailogbox.service .ts:

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material';
import { DialogOverviewExampleDialog } from './dialog-overview-example'

@Injectable()
export class DialogboxopenService {
  constructor(
    private commonModel: MatDialog
  ) { }

  public openmodel(title: string): Observable<boolean> {
    let ModelRef: MatDialogRef<DialogOverviewExampleDialog>;
    ModelRef = this.commonModel.open(DialogOverviewExampleDialog,
      { width: '50%' }
    );
    ModelRef.componentInstance.data = title;
    return ModelRef.afterClosed();
  }
}  

в auth.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { DialogboxopenService } from './dialogboxopen.service';

@Injectable()
export class AuthService {
  constructor(private dailogbox: DialogboxopenService, private http: HttpClient) { }

  signIn() {
    this.http.get('https://urlnotfound/sas').subscribe(response => {
      console.log(response)
    }, (error: HttpErrorResponse) => {
      this.handleError(error);
    })
  }
  handleError(errorResponse: HttpErrorResponse) {
    switch (errorResponse.status) {
      case 0:
        let m1 = `The request has not been applied because url not found status code  ${errorResponse.status}`
        this.dailogbox.openmodel(m1);
        break;

      case 500:
        let m2 = `The request has not been applied because Internal Server Error Status Code : ${errorResponse.status} `
        this.dailogbox.openmodel(m2);
        break;
    }
  }
}