如何以角度打印json数组

Question

这里是 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

Answer 1

你只需要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

Answer 2

我只是使用您的 Student Array 编写了一个基本的ngFor 代码。试试这个，希望能帮到你。谢谢

HTML

<div class="studentList" *ngFor="let student of students">
  <ul>
    <li>ID : {{student.id}}</li>
    <li>Name : {{student.name}}</li>
    <li>Pass : {{student.value.pass}} [{{student.value.pass ? 'Yes' : 'No'}}]</li>
    <li>Verified : {{student.value.verified}}</li>
  </ul>
</div>

TS

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

CSS

.studentList ul {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.studentList ul li {
  display: inline-block;
  margin-right: 10px;
}