角度4 - サービスからコンポーネントへのエラーオブジェクトの取得

Question

私はバックエンドとしてフロントエンドとスプリングセキュリティとして角度をつけたログインページで作業していますが、すべて正常に動作しているようですが、サービスからコンポーネントへのエラーをキャッチすることによる例外は機能していません。

service.ts問題は、コンポーネント・レベルERRで、コンポーネントにサービスから応答コードをキャッチしている

login(form) { 
     var objectToSend = 'j_username=' + form.j_username + '&j_password=' + form.j_password; 
     const headers = new Headers(
     { 
      'Content-Type': 'application/x-www-form-urlencoded', 
     } 
    ); 
     const options = new RequestOptions({headers: headers, withCredentials: true}); 
     return this.http.post('http://localhost:8080/***********/authenticate', objectToSend, options) 
     .map((res) => res) 
     .catch((error: any) => { 
      if (error.status === 401) { 
      console.log(error.status + ' is the current status'); 
      return Observable.throw(new Error(error.status)); 
      } else if (error.status === 400) { 
      return Observable.throw(new Error(error.status)); 
      } else if (error.status === 409) { 
      return Observable.throw(new Error(error.status)); 
      } else if (error.status === 406) { 
      return Observable.throw(new Error(error.status)); 
      } 
     }); 
    } 

login.component.ts

 loginProcess() { 
     this._authenticationService.login(this.form.value).subscribe(
     res => { 
      this.data = res; 
      if (res.status === 200) { 
      this._authenticationService.getRoles().subscribe(
       resp => { 
       if (resp.status === 200) { 
        this.roles = JSON.parse(resp.text()); 
        this.role = this.roles[0].authority; 
        localStorage.setItem('role', this.role); 
        this.connectedUser.eusLogin = this.form.value.j_username; 
        this.saveConnectedUser(this.connectedUser); 
        this.updateSessionTimeOut(); 
        if (this.role === 'ROLE_ADMIN') { 
        this._router.navigate(['home']); 
        } 
       } else { 
        this.showErrorMsgDetail = true; 
        this.error = true; 
       } 
       }, 
       error => { 
       this.error = true; 
       } 
      ); 
      } else { 
      } 
     }, 
     err => { 
      if (err.status === 401) { 
      this.showErrorMsgDetail = true; 
      this.errorMsgDetail = 'Bad credentials, try again'; 
      } 
     } 
    ); 
    } 

.statusは未定義です。

皆さん、これを理解できると願っています。

Answer 1

イベントエミッタまたはBehaviorSubjectなしで通信しようとしていますが、どのようにエラーを他の場所にキャッチしたいですか？

サービスでエラーをキャッチし、コンストラクタのログインコンポーネントに挿入してから、this.myService.getDataFromWebService（post）を使用してコンポーネントからサービスを呼び出すだけで済みます。

getDataFromWebService(postData: Kpi): EventEmitter<Kpi> { 
    const event: EventEmitter<Kpi> = new EventEmitter(); 
    this.sendPost(myService.API_PATH, postData).subscribe((data) => { 
     try { 
     if (this.checkError(data)) { 
      const parseData: Kpi = Kpi.parse(data); 
      event.emit(parseData); 
     } else { 
      event.emit(new Kpi()); 
     } 
     } catch (ex) { 
     this.env.error("Unknown error", "Invalid data received"); 
     console.log("Exception", ex); 
     kpiEvent.emit(new Kpi()); 
     } 
    }); 
    return event; 
    }