Angular中如何动态生成唯一HTML元素ID？

你的错误出在[id]属性绑定的语法上，不能把拼接符号+放在绑定表达式外面，浏览器会把+识别成无效的属性名，导致运行报错。

正确的写法是把完整的拼接逻辑放在[id]的绑定表达式内部：

方案1：直接拼接属性值 #

如果implementor是组件类里定义的属性，直接在绑定表达式里完成拼接：

<div
*ngFor="let row of rows"
title="{{ row.text }}">
<span
    [id]="tag.index + implementor"
    tabIndex="0">
    {{ row.text }}
</span>
</div>

方案2：使用模板字符串（更规范） #

为了让ID格式更清晰，避免无分隔符拼接带来的混淆，推荐用ES6模板字符串语法，给拼接内容加上分隔符（比如-）：

<div
*ngFor="let row of rows"
title="{{ row.text }}">
<span
    [id]="`${tag.index}-${implementor}`"
    tabIndex="0">
    {{ row.text }}
</span>
</div>

额外注意 #

另外检查tag.index的有效性：如果是*ngFor循环的索引，通常应该用*ngFor="let row of rows; let i = index"，然后用i代替tag.index，确保索引变量正确。

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