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

鉴于items是唯一的，您可以肯定地这样做：

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

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

这里是demo。

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

Answer 2

您可以尝试：

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

或如果项目不是唯一的，则使用ngfor索引：

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

DEMO

如何在Angular中将标签与标签外的表单字段相关联？

app.component.ts

app.component.html

2 个答案: