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

Question

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

应用程序组件.ts

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

应用程序组件.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

鉴于它们items是独一无二的，你当然可以这样做：

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

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

这是演示。

如果您无论如何需要生成唯一 ID，请查看Shortid