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}}不起作用。

“abc”应该是一个字符串。 如何在不将属性（计数器：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" ..

工作堆栈闪电战..

Answer 2

你应该改变：

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

normalString应该在 {{}} 之外

data属性也不正确，阅读更多如何正确添加自定义数据属性：

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