错误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：无法读取CatchSubscriber.push上的未定义属性'openDialogTEST'.. / src / app / myerrorHandle.ts.myerrorHandle.handleError [as selector]（myerrorHandle.ts：29）at CatchSubscriber.push ../ node_modules / rxjs MergeMapSubscriber.push上的/_esm5/internal/operators/catchError.js.CatchSubscriber.error(catchError.js:33）../ 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）at MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber。 _sror（Subscriber.js：80）在FilterSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.error（Subscriber.js：60）在FilterSubscriber.push ../ node_modules / rxjs / _esm5 /在MergeMapSubscriber.push的FilterSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.error（Subscriber.js：60）中的internal / Subscriber.js.Subscriber._error（Subscriber.js：80）。 。/节点_ 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 ）

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;
    }
  }
}