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

当登录无效时，将收到以下响应

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

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

类

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

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

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

模板

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

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

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

工作代码

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

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

感谢@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>

this.userService.sign（form.value.email、form.value.password）
.订阅(
data=>this.signedData=data，
错误=>
{
让err=JSON.parse（error.\u body）；
if（err&&err.email&&err.email[0]）{
此.errors.push（err.email[0]）；
}
if（err&&err.password&&err.password[0]）{
this.errors.push（err.password[0]）；
}  
}
);

{{error}}

您引用了错误的变量

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

更新1： 您应该转换为json（），如下所示

---

您引用了错误的变量

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

更新1： 您应该转换为json（），如下所示

---

*ngFor

仅支持类似于

阵列的iterables

您的

错误。body

是一个对象

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

因此，它与

*ngFor

而不是使用

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

---

*ngFor

仅支持类似于

阵列的iterables

您的

错误。body

是一个对象

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

因此，它与

*ngFor

而不是使用

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

---

---

这是一个打字错误，问题依然存在。我试着添加你建议的

json

管道，但我得到了相同的错误，带有转义引号<代码>离子：./LoginPage类LoginPage-内联模板：30:17中的错误，原因是：找不到不同的支持对象“{\”email\：[\”email字段是必需的。\”]，\“password\”：[\“password”字段是必需的。\“]}”类型为“string”。NgFor仅支持绑定到阵列等可移植文件。谢谢您的时间。看来那一定是我错过的。但是现在它产生了一个类似的错误：

EXCEPTION:error in./LoginPage类LoginPage-inline模板：30:17导致：找不到类型为“object”的不同支持对象“[object object]”。NgFor仅支持绑定到阵列等可编辑文件。

您需要更多帮助，还是问题已解决？是否有返回错误的特定格式。我的意思是

export interface errorClass

我们可以使用一个通用的吗？那么问题已经解决了还是需要帮助？这是一个输入错误，问题仍然存在。我试着添加你建议的

json

管道，但我得到了相同的错误，带有转义引号<代码>离子：./LoginPage类LoginPage-内联模板：30:17中的错误，原因是：找不到不同的支持对象“{\”email\：[\”email字段是必需的。\”]，\“password\”：[\“password”字段是必需的。\“]}”类型为“string”。NgFor仅支持绑定到阵列等可移植文件。谢谢您的时间。看来那一定是我错过的。但是现在它产生了一个类似的错误：

EXCEPTION:error in./LoginPage类LoginPage-inline模板：30:17导致：找不到类型为“object”的不同支持对象“[object object]”。NgFor仅支持绑定到阵列等可编辑文件。

您需要更多帮助，还是问题已解决？是否有返回错误的特定格式。我的意思是

export interface errorClass

我们能用一个通用的吗？那么这个问题已经解决了还是需要帮助？我知道哪里出了问题<代码>{{errors | json}}会打印整个对象。是的，我需要单独打印。如果我为相同的错误实现了

{{signInErrors？.email[0]}

，我在./LoginPage类LoginPage-inline模板：31:23中得到

错误，原因是：无法读取未定义的

的属性“0”-尽管电子邮件字段仍然是空的。对于

{errors？.email}

，它似乎根本不打印任何内容。另外，对象中可能有也可能没有

email

属性。@匿名如果没有该属性，当然不会打印它。但它会打印，但不会打印，所以我们有一个问题是对的，但它不会打印。因此，如果我console.log（this.errors），我会得到以下结果<代码>数组[1]0:“{”电子邮件“：[“电子邮件字段是必需的。”]，“密码”：[“密码字段是必需的。”]}”长度：1 __;：数组[0]。errors是一个包含单个对象的数组。它似乎是正确的，应该是这样的。但它仍然输出

无法读取未定义的
的属性“0”。我知道哪里出错了<代码>{{errors | json}}
会打印整个对象。是的，我需要单独打印。如果我为相同的错误实现了
{{signInErrors？.email[0]}
，我在./LoginPage类LoginPage-inline模板：31:23中得到
错误，原因是：无法读取未定义的
的属性“0”-尽管电子邮件字段仍然是空的。对于
{errors？.email}
，它似乎根本不打印任何内容。另外，对象中可能有也可能没有
email
属性。@匿名如果没有该属性，当然不会打印它。但它会打印，但不会打印，所以我们有一个问题是对的，但它不会打印。因此，如果我console.log（this.errors），我会得到以下结果<代码>数组[1]0:“{”电子邮件“：[“电子邮件字段是必需的。”]，“密码”：[“密码字段是必需的。”]}”长度：1 __;：数组[0]

。errors是一个包含单个对象的数组。它似乎是正确的，应该是这样的。但它仍然输出

无法读取未定义的属性“0”