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"之类的属性绑定将值分配给自定义属性。

Working Stackblitz..

Answer 2

您应该更改：

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

normalString应该在{{}}

之外

data属性也不正确，请详细了解如何正确添加自定义数据属性：

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

Angular-如何将计数器变量从模板添加到html属性？

2 个答案: