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

错误TypeError：无法读取未定义的属性'openDialogTEST'

1 个答案: