Angular2如何顯示來自後端的錯誤消息

Question

我想在引導警報中顯示錯誤消息。我使用angular2作爲我的前端和流明作爲我的後端。

前端

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

我想從驗證功能的前端

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') 
    ); 
} 

在我的服務}

顯示響應

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

我將設置錯誤消息（如果返回一個）等於角度變量，然後檢查是否該變量存在，以決定是否顯示它。

<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>元素無序列表。

Answer 2

在你的HTTP請求，你必須添加一個catch，類似以下內容：

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功能會給你從服務器返回的整個響應側。您可以輕鬆地從響應主體中提取錯誤消息並將其分配給一個變量。

然後，您可以使用插值在引導警報中顯示錯誤消息。