如何在 HTML 的 typescript 中迭代 JSON 数组？答案

【问题标题】：How to iterate a JSON array in typescript in HTML?如何在 HTML 的 typescript 中迭代 JSON 数组？
【发布时间】：2018-10-02 23:29:19
【问题描述】：

我有一个sn-ps的JSON数组如下图：

[{
        "auction_number": "015",
        "email": "pete@abc.com",
        "first_name": "Peter",
        "last_name": "Dan",
        "table": 0,
        "id": "015"
    },
    {
        "auction_number": "024",
        "email": "dan@gog.com",
        "first_name": "Dan",
        "last_name": "Fain",
        "table": 0,
        "id": "024"
    }
]

打字稿代码：

上面的 JSON 数组 的 typescript (ts) 如下所示。这里attendees是一个数组对象。

attendees: Attendee[];
 constructor(public authService: AuthService) {
    const str = localStorage.getItem("attendees");
    if(str) {
      this.attendees = JSON.parse(str);
      console.log(str);
    }
  }

HTML 代码：

我用来从 JSON 数组（在打字稿代码中） 中迭代所有内容的 HTML 代码 如下所示。由于某些原因，它无法在 HTML 中迭代 attendees。

<tr *ngFor="let row of attendees">
   <td class="left">{{ attendees.first_name }} {{ attendees.last_name }}</td>
   <td class="number1">250</td>
   <td class="table1">{{attendees.table}}</td>
   <td class="right-bill">Bill</td>
</tr>

问题陈述：

我想知道我应该对上面的 HTML 代码 进行哪些更改，以便能够成功地迭代 attendees 数组。我尝试使用 ngfor 指令 但不知何故它不起作用。

【问题讨论】：

标签： json loops typescript angular5 ngfor

【解决方案1】：

您再次访问父循环，您应该只访问行的元素

<tr *ngFor="let row of attendees">
   <td class="left">{{ row .first_name }} {{ row .last_name }}</td>
   <td class="number1">250</td>
   <td class="table1">{{attendees.table}}</td>
   <td class="right-bill">Bill</td>
</tr>

【讨论】：

【解决方案2】：

您应该将每行中的字段引用为row.first_name，因为您将每个与会者设置为let row of attendees。你定义的变量是row。

【讨论】：

我试过这个<tr *ngFor="let row of attendee"> <td class="left">{{row.first_name}}</td> <td class="number1">250</td> <td class="table1">{{row.table}}</td> <td class="right-bill">Bill</td> </tr>，但我没有看到任何变化。
应该是let row of attendees。我修改了那个。抱歉上面的错字。