时间戳

首页 > 解决方案 > 如何以角度打印json数组

html - 如何以角度打印json数组

问题描述

这里 Stackblitz https://stackblitz.com/edit/angular-parse-object 来自 REST API 的响应格式是

[{"id":123,"name":Test,"value":{"pass": true, "verified": true}}, {"id":435,"name":Test12,"value":{"pass": false, "verified": true}},]

<div *ngFor="let record of student.value">
  <ul *ngFor="let key of objectKeys(record)">
    <li>{{key}} :: {{record[key]}}</li>
  </ul>
</div>

出现错误**无法读取未定义的属性“值”**

<div *ngFor="let rec of student">
      <h2>{{rec.id}}</h2>
         <div *ngFor="let result of rec.value">
               <h4>  {{value.pass}} </h4>
          </div>
   </div>

获取“字符串”类型的错误对象。NgFor 仅支持绑定到 Iterables，例如 Arrays。

如何解决？

我希望输出为

ID : 123 Name : Test Pass : true [yes] verified : true

标签： htmltypescriptangular6

解决方案

您只需要 1 ngFor，您的值不是数组。

<div *ngFor="let rec of student">
      <h2>Id: {{rec.id}} Name: {{rec.name}} Pass: {{rec.value.pass}} Verified: {{rec.value.verified}}</h2>
</div>

参考（可以格式化） https://stackblitz.com/edit/angular-iterator

更新：

像这样用 JSON.parse 改变你的地图函数

this.student = ["{pass: true, verified: true}", "{pass: false, verified: true}"];
    this.student = this.student.map(c=>JSON.parse(c.replace(/([a-zA-Z0-9-]+): ([a-zA-Z0-9-]+)/g, "\"$1\":\"$2\"")));

https://stackblitz.com/edit/angular-parse-object

推荐阅读