Angular - Как добавить счетчик Переменная из шаблона в свойство html?

Question

У меня есть HTML:

<ng-container *ngFor="let something of things; let i = index">
<span data-e2e="{{"abc" + i}}" class="checkmark"></span>
</ng-container>

Я хочу, чтобы этот результат отображался в DOM:

<span data-e2e="abc0" class="checkmark"></span>
<span data-e2e="abc1" class="checkmark"></span>
...

Но это {{"abc" + i}} не сработает.

"ab c" должно быть строкой. Как я могу это сделать, не сохраняя свойство (counter: i) на контроллере компонентов

Answer 1

Вы должны изменить,

<ng-container *ngFor="let something of things; let i = index">
<span data-e2e="{{"abc" + i}}" class="checkmark"></span>
</ng-container>

На:

<ng-container *ngFor="let something of things; let i = index">
<span [attr.data-e2e]="'abc'+i" class="checkmark"> {{something}} </span>
</ng-container>

Здесь вы должны использовать attr в качестве префикса, и вам необходимо присвоить значение пользовательскому атрибуту, используя привязку свойства, например, [attr.data-e2e]="'abc'+i" ..

Рабочий Stackblitz ..

Answer 2

Вы должны изменить:

<span data="normalString{{i}}" class="checkmark"></span>

normalString должно быть за пределами {{}}

также data атрибут неверен, узнайте больше о том, как правильно добавить пользовательский атрибут данных :

https://www.w3schools.com/tags/att_global_data.asp