Angular 素材 dialogRef.afterClosed().subscribe not handle error

Question

I'm using an angular material modal to call a web service in case of confirme button clicked it's work the problem it's I can't get the error in case of the web service return an error

dialogRef.afterClosed().subscribe(result => {

// calling the ws 
 this.reqService.onRequestSave(this.request).subscribe(data =>{

    // do some work
  },err=>{
      // never displayed
      alert(err)
   }
)

},error=>{
     // never displayed
     alert(error)
} 
);

// Rest client

 onRequestSave(request : RequestDto){
        console.log(JSON.stringify(request))
        return this.http.post<RequestResponseDto>(this.apiUrl + "/request",JSON.stringify(request),this.utils.getHeaders());
    }

I want to display the first alert any idea how to fix that thanks for any help

Answer 1

Why are you trying to call the service in the parent component. Instead on click of confirmation button, you can have a method that calls the service and if the call is successfully completed, close the dialog and if there is an error, display the error.

Maybe something like this.

In the dialog component:-

onConfirmation(){
  this.reqService.onRequestSave(this.request).subscribe(
    data  => { this.dialog.close(data); },
    error => { alert(error); }
}

and in the parent component:-

dialog.afterClosed().subscribe(result => {
  this._snackbar.open("Request successfully saved.");
});

Answer 2

What if you try surround that code with try/catch? This should work for errors where your 'processing' code throws an error:

dialogRef.afterClosed().subscribe(result => {
  // calling the ws 
  this.reqService.onRequestSave(this.request).subscribe(data =>{
    try {
      // processing 'data'
    } catch (err) {
      // displayed, if the processing code
      alert(err);
    }
  }, err=>{
    // displayed, if the Observable produces an error
    alert(err);
  });
});