Question

我有一个服务调用，当它返回404错误时，我想显示当状态为404时来自服务器的消息。所以，如果出现错误或成功，我会得到一个json的帖子我是一个状态代码和消息，指示它是否成功。

当然，我有这个服务电话：

 this._transactionService.findExistingTransaction(user, searchNumber)
       .subscribe(data => {

       this.transactionResponse = data;
       console.log(JSON.stringify(this.transactionResponse));

       this.router.navigate(['/edit-transaction-portal'], {queryParams: {bill: searchNumber}});

       this.onDismiss();
      }, (err) => { this.displayErrors = true;});

出错，它会设置bool displayErrors = true然后我可以在我的UI中显示错误信息。

在html代码中：

 <input #inputtedNumber class="transactionInput" placeholder="{{numberPlaceholder | translate }}"/>
        <div class="error-msg1" *ngIf="displayErrors" style="margin-left:90px;" name="errorMsg">
           {{transactionResponse._errorDetails._message}} </div>

这是我直接尝试访问api端点时回发的json：

{  
   "_transactionNumber":null,
   "_order":null,
   "_errorDetails":{  
      "_status":"404",
      "_message":"Number is not available"
   }
}

我绑定到从服务调用中返回的transactionResponse对象。不幸的是，尽管我认为这应该有效，但我得到的问题是_errorDetails未定义，所以没有任何显示。

我想知道这是否适合这样的设置？如果现在，我该如何解决？

谢谢！

编辑：没有回答的重复SO帖子：How to read Custom error message from backend in Angular 4/2

Answer 1

来自服务器的响应正文应位于error回调中返回的错误响应的error属性中。

关于HttpErrorResponse，文档说明：

表示错误或失败的响应，可能来自非成功的HTTP状态，执行请求时的错误，或者在解析响应期间发生的其他故障。
Observable响应流上返回的任何错误都将包含在HttpErrorResponse中，以便在发生错误时提供有关HTTP层状态的其他上下文。 error属性将包含一个包装的Error对象或从服务器返回的错误响应。

如果您想使用相同的transactionResponse来显示错误，请指定返回error的{{1}} err属性。

服务电话

this.transactionResponse

<强> HTML 然后这将有效。

this._transactionService.findExistingTransaction(user, searchNumber).subscribe(
   (data) => {

     this.transactionResponse = data;
     console.log(JSON.stringify(this.transactionResponse));

     this.router.navigate(['/edit-transaction-portal'], {queryParams: {bill: searchNumber}});

     this.onDismiss();
  },
  (err: HttpErrorResponse) => {
    this.displayErrors = true;

    // assign the error property of the err that comes back to the transactionResponse
    this.transactionResponse = err.error;
  });

2017年9月，Angular的这一部分已经完成了一些工作。parse error response body for responseType "json"所以你可能需要根据你的版本更新Angular。

此解决方案在以下方面进行了测试：

Node v8.2.1
NPM v5.3.0
Angular CLI：1.7.2
Angular：5.0.0

编辑：StackBlitz示例

HttpErrorResponse StackBlitz example

此示例对服务的外观以及调用的端点做出了一些假设。该服务对<input #inputtedNumber class="transactionInput" placeholder="{{ numberPlaceholder | translate }}"/> <div class="error-msg1" *ngIf="displayErrors" style="margin-left:90px;" name="errorMsg"> {{transactionResponse._errorDetails._message}} </div>进行POST来电。这会失败并返回www.google.com。

HttpErrorResponse

{ "isTrusted": true }的{{1}}属性已分配给error。然后可以在模板中访问它并在浏览器中显示。

Answer 2

您的问题是，如果出现错误，您的

data => {
       this.transactionResponse = data;

代码没有被调用 - 你有一个错误响应，而不是正常的响应。

尝试从

获取信息

 }, (err) => { this.transactionResponse = err

一部分。

Answer 3

我认为您可以使用typed response:

在error通知类型上，您可以使用以下内容：

err =>  {
        this.localErrorResponse = err as ErrorResponse;
        this._order= this.localErrorResponse._order;
      }

在课堂上，你也可以：

import { ErrorResponse } from './error-response';

localErrorResponse: ErrorResponse;
_order: string;

然后，您可以将ErrorResponse类设为：

import { ErrorDetail } from './error-detail';

export class ErrorResponse{
  _transactionNumber: number;
  _order: string;
  _errorDetails: ErrorDetail;
}

和班级ErrorDetail

export class ErrorDetail {
  _status: number;
  _message: string
}

然后您可以将其他变量映射为_order（this._order），或者从localErrorResponse（this.localErrorResponse）变量中获取

Answer 4

我有一个服务调用，当它返回404错误时，我想显示状态为404时来自服务器的消息

...

我绑定到我从我的回复的transactionResponse对象服务电话。不幸的是，虽然我认为这应该有用，但我得到_errorDetails未定义的问题，因此没有任何显示。

试试这个：

StackBlitz EXAMPLE

当出现404错误时，如何获取帖子json？

4 个答案: