Question

我正在一个项目中，每个表单元格都需要一个唯一的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，其中将index变量加1。此技巧不起作用，所有td都具有相同的id，尽管此方法为每一行生成一个唯一的ID。

非常感谢您的帮助。我做了很多技巧，但对我来说真的没有用：（

谢谢！

Answer 1

尝试如下

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。

Answer 2

通过这种方式可以生成它。

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

Answer 3

你好，尝试使用列名+循环索引这样，您可以生成唯一的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>

角度-为每个表格单元格生成唯一的CSS ID

3 个答案: