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

Posted 2023-03-13

【中文标题】如何在 HTML 的 typescript 中迭代 JSON 数组？

【英文标题】：How to iterate a JSON array in typescript in HTML?

【发布时间】：2018-10-02 23:29:19

【问题描述】：

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

[
        "auction_number": "015",
        "email": "[e-mail]",
        "first_name": "Peter",
        "last_name": "Dan",
        "table": 0,
        "id": "015"
    ,
    
        "auction_number": "024",
        "email": "[e-mail]",
        "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 指令 但不知何故它不起作用。

【参考方案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。我修改了那个。抱歉上面的错字。