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类中的错误登录页面 - 内联模板：30：19导致：找不到不同的支持对象'{“email”：[“电子邮件字段是必需的。”]，“密码”：[“密码字段是必需的。“]}'类型'字符串'。 NgFor仅支持绑定到Iterables，例如Arrays。

我该如何处理？

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>

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

2 个答案: