angular2のさまざまなHTTPエラーに異なるエラーメッセージを表示するにはどうすればよいですか？

Question

以下のコードを追加しました。基本的には、さまざまなシナリオにエラーメッセージを表示する必要があります（HTTPステータスコードが返されます）。私は観察可能なものについてのこれらの概念をすべて把握しようとしていますが、これまで私はどこにも到達していません。誰かが私を助けてくれることを願っています。

export class HomePage { 

    private formData: FormGroup; 
    public errors: string = ""; 

    constructor(
    public navCtrl: NavController, 
    public authService: AuthServiceProvider, 
    public formBuilder: FormBuilder                                             
    ) { 

    this.formData = this.formBuilder.group({ 
     email: ['', Validators.compose([Validators.required,Validators.email])], 
     password: ['', Validators.required], 
    }); 


    doRegister(){ 
     this.authService.register(this.formData.value) 
     //Coming from angular 1 and I've honestly have no idea what I'm doing from here 
     .toPromise() 
     .then(data => this.navCtrl.push(ProfiePage,data)) 
     .catch((error: any) => { 
      /* 

      I want to show different msgs for different http erros 
      example 
      for 500 "username already exists" 
      for 400 " Invalid username" 
      for 401 "Someother error" 
      How do I do this? 

      */ 
      this.errors = "Username already exists"; 
     }); 

    } 


    } 

} 

@Injectable() 
export class AuthServiceProvider { 


    register(userData): Observable<UserModel[]>{ 
     // http error 500 will be return if there is an email exists error 
     return this.http.post(this.config.apiUrl+this.config.user.register,JSON.stringify(userData)) 
     .map((res: Response) => res.json()); 

    } 



} 





<ion-content padding id="page2"> 

/* I want to show the errors here */ 
{{error}} 

    <form [formGroup]="formData" (ngSubmit)="register()"> 
    <ion-list id="signup-list1"> 
     <ion-item id="signup-input5"> 
     <ion-label> 
      Email 
     </ion-label> 
     <ion-input type="email" placeholder="" formControlName="email"></ion-input> 
     </ion-item> 
     <ion-item id="signup-input6"> 
     <ion-label> 
      Password 
     </ion-label> 
     <ion-input type="text" placeholder="" formControlName="password"></ion-input> 
     </ion-item> 
    </ion-list> 
    <button [disabled]="!formData.valid" ion-button color="positive" block> 
     Sign up 
    </button> 
    </form> 


</ion-content> 

Answer 1

あなたはサービスからエラーを投げ、およびコンポーネントに取得することができます

register(userData): Observable<UserModel[]>{ 
    return this.http.post(this.config.apiUrl+this.config.user.register, 
     JSON.stringify(userData)) 
     .map((res: Response) => res.json()) 
     .catch(
     (error: Response) => { 
      return Observable.throw(error.json() as JsonResponse) 
     });; 
} 

とコンポーネントで

することができますがcatchブロックでエラーオブジェクトで

test(): void { 
    this.testService.register().subscribe(
     (data: UserModel[]) => { 
      console.log(data); 
     }, (error: JsonResponse) => { 
      console.log(error); 
     } 
    ) 
} 

Answer 2

ステータスプロパティになるので、httpエラーコードにerror.statusとしてアクセスできます。条件を使用してこのerror.status値をチェックすることで、シナリオを処理できます。しかし、あなたのコードを見ると、エラーコードから検証メッセージを作成しているようです。コード内で操作するのではなく、サーバーからの検証メッセージを返す方が良いと思います（APIを編集できる場合）。したがって、将来的に検証メッセージを変更したい場合は、クライアントコードを変更せずに検証メッセージを変更することができます。