html - 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）保存到组件控制器

标签： htmlangular

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..