如何将ngFor的索引作为HTML标签属性值的一部分

当然可以实现，你原来的写法存在语法错误，导致索引无法正确拼接进data-test属性里，调整成以下两种方式即可：

方式一：使用属性绑定语法 #

通过[attr.data-test]绑定自定义属性，用字符串拼接生成目标值：

<div *ngFor="let record of RecordsProcessed; let i = index">
   <div class="row my-16" [attr.data-test]="'test_' + i">
        <div class="col-4">Id:</div>
        <div class="col-8">{{record?.Id}}</div>
    </div>
</div>

这里[attr.data-test]是Angular中绑定自定义HTML属性的标准写法，能确保属性值正确解析模板表达式。

方式二：直接使用插值表达式 #

把整个属性值用双引号包裹，直接在里面拼接索引：

<div *ngFor="let record of RecordsProcessed; let i = index">
   <div class="row my-16" data-test="test_{{i}}">
        <div class="col-4">Id:</div>
        <div class="col-8">{{record?.Id}}</div>
    </div>
</div>

这种写法更简洁直观，适合简单的字符串拼接场景。

为什么原来的写法不行？ #

你之前写的data-test='test'_{{i}}会被浏览器错误解析：单引号会把'test'当成完整的属性值，后面的_{{i}}会被视为无效的HTML内容，导致索引无法正确绑定到属性中。

内容的提问来源于stack exchange，提问作者Rich