javascript - 如何在 Angular 中将标签与其外部的表单字段关联起来？

Question

假设我正在 *ngFor 循环中创建标签和表单字段，如下所示:

app.component.ts

export class AppComponent  {
  items = ['aaa', 'bbbbbb', 'ccccccccc']
}

app.component.html

<div class='form'>
  <ng-container *ngFor="let item of items">
    <label>{{item|uppercase}}:</label>
    <input [value]="item"/>
  </ng-container>
</div>

(在 StackBlitz 上查看: https://stackblitz.com/edit/angular-ptwq6t )

有没有一种方法可以将这些“动态”标签和输入清晰地相互关联？如果我这样做:

<label for="field" >{{item|uppercase}}:</label>
<input id="field" [value]="item"/>

Angular 只是逐字重复 for 和 id 属性，并且所有标签都指向第一个输入字段。

是否有某种方法可以使用 Angular 的组件身份，或者我是否坚持自己生成 UUID，或者以其他方式自己保证 ID 的唯一性？

我无法将输入嵌套在标签内，因为我必须重用一些已经实现的 CSS，这些 CSS 不需要这种结构，但仍然希望拥有适当的标签带来更好的可用性。

Answer 1

鉴于项目是唯一的，您当然可以这样做:

<label [for]="item" >{{item|uppercase}}:</label>
<input [id]="item" [value]="item"/>

这样，每个 id 和 for 将是唯一的，并且标签将按要求工作。

这是demo .

如果您仍然需要生成唯一 ID，请查看 shortid