Angular — создание уникального идентификатора css для каждой ячейки таблицы
Я работаю над проектом, в котором мне нужен уникальный идентификатор CSS для каждой ячейки таблицы. Формат таблицы примерно такой.
<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, хотя этот метод генерирует уникальный идентификатор для каждой строки.
Я очень ценю любую помощь. Я сделал много трюков, но ничего не работает для меня :(
Спасибо!
какое значение индекса на выходе?
Я получаю один и тот же идентификатор для всех td, но мне нужен уникальный идентификатор для них.
Вывод приведенного выше кода pieChartDiv1 для всех td первой строки.
в вашем случае вы должны получить 4 td с одинаковыми id для каждого элемента в schoolReportData, если вам нужны уникальные id, оставьте только один td внутри *ngFor
попробуйте ответ, как было предложено, который сгенерирует уникальный идентификатор для элемента td
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
попробуйте, как показано ниже
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.
Я не могу применить цикл к td, потому что я показываю ответ API в таблице. Становится так сложно получить эти данные в цикле.
@Neeraj - если вы можете поделиться более подробной информацией, например, что такое ответ или структура объекта, я могу больше помочь в этом
@PranayRana. Я действительно благодарю вас за вашу помощь, но уловка Дхавала Гохеля сработала для меня.
@Neeraj - добро пожаловать в следующий раз, когда лучше предоставить больше контекста, поэтому будет полезно дать хорошее решение.
Таким образом, вы можете сгенерировать его.
<table>
<tr *ngFor = "let classroom of schoolReportData">
<td *ngFor = "let a of [0,1,2,3,4,5]" id = "{{ 'pieChartDiv'+a }}"></td>
</tr>
</table>
Привет. Попробуйте так: с именем столбца + индексом цикла вы можете создать уникальный идентификатор.
<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>
какой результат вы получаете?