Laravel Angular2如何显示来自后端的错误消息

我想在引导警报中显示错误消息。我使用angular2作为前端，lumen作为后端

前端

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

组件技术

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

}

反应

---

我会将错误消息（如果返回一条）设置为等于一个角度变量，然后检查该变量是否存在，以决定是否显示它

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

---

要正确显示所有消息，您可能需要循环JSON响应，或者连接字符串，或者将单个消息作为

元素添加到无序列表中。

我会设置错误消息（如果返回一条）等于一个角度变量，然后检查该变量是否存在，以决定是否显示该变量

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

---

要正确显示所有消息，您可能需要循环JSON响应并连接字符串，或者将单个消息作为

元素添加到无序列表中。

在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函数将从服务器端返回整个响应。您可以轻松地从响应正文中提取错误消息并将其分配给变量

---

然后可以使用插值在引导警报中显示错误消息

在http请求中，您必须添加一个捕获，如下所示：

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函数将从服务器端返回整个响应。您可以轻松地从响应正文中提取错误消息并将其分配给变量

---

然后可以使用插值在引导警报中显示错误消息

你读过处理可观测误差的书吗？你读过处理可观测误差的书吗？