Javascript 角度-为每个表格单元格生成唯一的css id

我正在进行一个项目，在这个项目中，我需要为每个表单元格提供一个唯一的CSS id。表的格式如下所示

<tr *ngFor="let classroom of schoolReportData ; let i = index">
  <td id="{{ 'pieChartDiv'+(i+1) }}"></td>
  <td id="{{ 'pieChartDiv'+(i+1) }}"></td>
  <td id="{{ 'pieChartDiv'+(i+1) }}"></td>
  <td id="{{ 'pieChartDiv'+(i+1) }}"></td>
</tr>           

我试图用上面的方法生成css id，其中我用1递增索引变量。这个技巧不起作用，所有td都获得相同的id，尽管这个方法为每一行生成一个唯一的id

我真的很感谢你的帮助。我玩了很多把戏，但没有什么对我有用：

谢谢大家!

试试下面的方法

let arr = [1,2,3,4];


<tr *ngFor="let classroom of schoolReportData ; let i = index">
  <td *ngFor="let a of arr;" id="{{ 'pieChartDiv'+a }}"></td>
</tr>           

---

因为如果您将id={{'pieChartDiv'+i+1}}}，那么它应该为所有td元素生成相同的id。

这样您就可以生成它

<table>
<tr *ngFor="let classroom of schoolReportData">
  <td *ngFor="let a of [0,1,2,3,4,5]" id="{{ 'pieChartDiv'+a }}"></td> 
</tr>  
</table>      

---

您好，使用列名+循环索引，您可以生成唯一的id

<tr *ngFor="let classroom of schoolReportData ; let i = index">
  <td id="{{ classroom.field1 + '_'+ i }}"></td>
  <td id="{{ classroom.field2 + '_'+ i }}"></td>
  <td id="{{ classroom.field3 + '_'+ i }}"></td>
  <td id="{{ classroom.field4 + '_'+ i }}"></td>
</tr>

---

您得到的是什么输出？输出处的索引值是多少？我得到的是所有td的相同id，但我想要它们的唯一id。上面代码的输出是第一行所有td的pieChartDiv1。在您的情况下，schoolReportData中的每个元素都应该得到4个id相同的td，如果您需要唯一id，在*ngForI中只保留一个td，我无法在td上应用循环，因为我在表中显示了API响应。在循环中获取这些数据变得非常困难。@Neeraj-如果你能分享更多细节，比如什么是响应或对象结构，我可以提供更多帮助that@PranayRana. 我真的很感谢你的帮助，但达瓦尔·戈赫尔的把戏对我起了作用。@Neeraj-欢迎下次你最好提供更多的上下文，这样才能给出好的解决方案