如何在 UI 中显示来自 POST 响应的错误？

Question

如果登录无效，则会收到以下响应。

Response {
  _body: "{
      "email": ["The email field is required."],
      "password":["The password field is required."]
     }",
  status: 422, ok: false, statusText: "Unprocessable Entity", headers: Headers
}

我想在 UI 中向用户显示错误。这是我对 observable 的实现。

Class

export class LoginPage
{
  signInData: any[];
  errors:     any[];
  ...

  this.userService.signIn(form.value.email, form.value.password)
  .subscribe(
    data => this.signedInData = data,
    error => this.errors = error._body
   );
}

我只是将检索到的 _body 对象设置为 this.errors。如果我尝试如下显示错误，

Template

 <ul *ngFor="let error of errors">           
   <li>{{error}}</li>
 </ul>

我收到以下错误。

./LoginPage 类 LoginPage 中的错误 - 内联模板：30:19 导致：找不到不同的支持对象 '{"email":["The email field is required."],"password":["The密码字段是必需的。"]}' 类型为 'string'。 NgFor 只支持绑定到 Arrays 等 Iterables。

我该如何处理？

UPDATE

如果我将订阅更改为：

this.userService.signIn(form.value.email, form.value.password)
  .subscribe(
    data => this.signedInData = data,
    error => this.errors.push(error._body)
);

<ul *ngFor="let error of errors">           
   <li>{{error}}</li>
</ul>

它成功打印了错误对象。现在我需要访问对象中的值，删除大括号并打印值。怎么样？

WORKING CODE

感谢@echonax，我能够将数据解析为 JSON，检查它是否存在，然后将其一一推送到错误数组中。

this.userService.signIn(form.value.email, form.value.password)
.subscribe(
  data => this.signedInData = data,
  error =>
  {
        let err = JSON.parse(error._body);
        if(err && err.email && err.email[0]){
          this.errors.push(err.email[0]);
        }
        if(err && err.password && err.password[0]){
          this.errors.push(err.password[0]);
        }  
  }
);

<ul *ngFor="let error of errors">           
   <li>{{error}}</li>
</ul>

Answer 1

你指的是错误的变量

<ul *ngFor="let error of error">           
   <li>{{error.email}}</li>
 </ul>

您将错误存储在errors 变量中，并且引用了signInErrors。

注意：您应该将其显示为 json，因为您无法预测服务会出现什么错误。

<span>{{error |json }}</span>

更新 1： 您应该转换为 json() 如下

this.userService.signIn(form.value.email, form.value.password)
  .subscribe(
    data => this.signedInData = data,
    error => this.errors = JSON.parse(error._body)
   );

Answer 2

*ngFor 仅支持 Arrays 等可迭代对象

您的error.body 是一个对象

"{
    "email": ["The email field is required."],
    "password":["The password field is required."]
 }"

所以不兼容*ngFor

而不是使用

<ul *ngFor="let error of errors">           
   <li>{{error}}</li>
</ul>

试试：

<span>{{errors | json}}</span>

就像@Aravind 提到的那样

如果你想单独选择它们，这样的事情可能会起作用：

<span>{{errors?.email[0]}}</span>
<span>{{errors?.password[0]}}</span>

更新

如果

this.errors.push(error._body) 有效

为了单独获取值；试试：

this.userService.signIn(form.value.email, form.value.password)
  .subscribe(
    (data) => this.signedInData = data,
    (error) => {
                 error = JSON.parse(error._body);
                 if(error._body && error._body.email && error._body.email[0]){
                   this.errors.push(error._body.email[0]);
                 }
                 if(error._body && error._body.password && error._body.password[0]){
                   this.errors.push(error._body.password[0]);
                 }                     
               }
);

<ul *ngFor="let error of errors">           
   <li>{{error}}</li>
</ul>