Angular2バックエンドからエラーメッセージを表示する方法

Question

ブートストラップアラートにエラーメッセージを表示したいとします。私はフロントエンドとして角度2を使用し、バックエンドとしてルーメンを使用しています。私は検証機能からの応答がフロントエンドに

public function uploadImage(Request $request) 
{ 
    $this->validate($request, [ 

     'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:60000', 

    ]); 
} 

component.ts私のサービスで

uploadFile(): void { 

let file = this.fileInput.nativeElement; 
if (file.files && file.files[0]) { 
    let fileToUpload = file.files[0]; 
    this.getInfoService 
    .uploadImage(fileToUpload) 
    .subscribe(
     data => console.log("DATA", data), 
     err => console.log(err), 
    () => console.log("()",'yay') 
    ); 
} 

}

を表示する

フロントエンド

<div class="alert alert-danger"> 
    // Display error message here 
</div> 

uploadImage(fileToUpload: any) { 

let input = new FormData(); 
input.append("image", fileToUpload); 
return this.http.post('http://Api.app/api/v1/uploadImage', input) 
    .map(
    (response: Response) => { 
     console.log("Upload img service", response); 
    } 
); 

}

応答

Answer 1

Iは、（一方が返された場合）、エラーメッセージを設定した角度変数に等しく、その変数かどうかを決定するために存在するかどうかチェックしますそれを表示する。

<div *ngIf="errors" class="alert alert-danger"> 
    {{ errors }} 
</div> 

はコンポーネント：

uploadFile(): void { 
    this.errors = null; 

    let file = this.fileInput.nativeElement; 

    if (file.files && file.files[0]) { 
    let fileToUpload = file.files[0]; 
    this.getInfoService 
     .uploadImage(fileToUpload) 
     .subscribe(
     data => { 
      console.log("DATA", data) 
     }, 
     err => { 
      this.errors = err 
     } 
    ); 
    } 
} 

適切にすべてのメッセージを表示するには、あなたはおそらくJSONレスポンスをループする必要がありますし、いずれかの文字列を連結し、またはで<li>要素として個々のメッセージを追加順序付けられていないリスト。あなたがキャッチを追加する必要があり、あなたのHTTPリクエストに

Answer 2

、次のようなもの：

uploadImage(fileToUpload: any) { 

let input = new FormData(); 
input.append("image", fileToUpload); 
return this.http.post('http://Api.app/api/v1/uploadImage', input) 
    .map(
    (response: Response) => { 
     console.log("Upload img service", response); 
    }) 
    .catch(this.handleError); 
} 

はその後handleErrorの機能を追加します。

private handleError(error: any) { 
    let errMsg = (error.message) ? error.message : 
     error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
    console.error(errMsg); // log to console instead 
    return Observable.of(error); 
} 

このhandleErrorの機能は、サーバーから戻って全体のレスポンスをお渡しします側。応答本文からエラーメッセージを簡単に抽出し、変数に代入することができます。

補間を使用して、ブートストラップアラートでエラーメッセージを表示することができます。