如何在HTML代码中为HTML元素的id设置变量值？

在Angular里要把变量值设为元素的id，需要使用属性绑定语法（用方括号[]包裹属性名），Angular会自动解析变量并将其值赋值给对应属性。

1. 普通变量的情况（比如counter） #

如果counter是组件类中定义的变量，直接通过[id]绑定即可：

<input [id]="counter" type="text" mozactionhint="next" name="sometext" />

要是需要给ID添加前缀避免重复，还可以拼接字符串：

<input [id]="'input-' + counter" type="text" mozactionhint="next" name="sometext" />

2. *ngFor循环中使用索引i的情况 #

在*ngFor循环里已经通过index as i获取了索引，同样用属性绑定把i赋值给id：

<table>
  <tbody>
    <tr *ngIf="currentNode?.parameters.length != 0">
      <td align="center">Type</td>
      <td align="center">Key</td>
      <td align="center">Value</td>
    </tr>
    <tr *ngFor="let item of getParametersWithoutName(); index as i;">
      <td>
        <select>
          <option>One-line</option>
          <option>Multiline</option>
        </select>
      </td>
      <td><input [id]="i" [ngModel]="item.name" (ngModelChange)="item.name = $event"/></td>
      <td><input [ngModel]="item.value" (ngModelChange)="item.value = $event"/></td>
    </tr>
  </tbody>
</table>

也可以给ID加语义化前缀：

<input [id]="'key-input-' + i" [ngModel]="item.name" (ngModelChange)="item.name = $event"/>

注意事项 #

• 不要直接用双引号包裹变量（比如id="i"），这种写法Angular会把它当作字符串字面量，不会解析变量值。
• 如果变量可能为null或undefined，可以添加空值处理，比如[id]="i ?? 'default-id'"，避免生成无效ID。

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