javascript - Angular:我有一个带有循环索引的 NgFor，如何将元素的名称指定为 "myName+IndexOfLoop"

Question

所以我有以下内容

<div *ngFor="let step of validationSteps; let i = index ">
<input matInput placeholder="SQL Query" name="sqlQuery" [(ngModel)]="validationSteps[i].sqlDetail.query">
 </div>

如何使名称成为“sqlQuery{loopOfIndexIHere}”并附加 i

Answer 1

就像任何其他绑定(bind)一样。在普通属性上使用 {{i}} 或在绑定(bind)属性上使用 [attr]="'name'+i":Stackblitz

您的示例将是以下之一:

<div *ngFor="let step of validationSteps; let i = index ">
  <input matInput
    placeholder="SQL Query"
    name="sqlQuery{{i}}"
    [(ngModel)]="step.sqlDetail.query">
</div>

或

<div *ngFor="let step of validationSteps; let i = index ">
  <input matInput
    placeholder="SQL Query"
    [name]="'sqlQuery' + i"
    [(ngModel)]="step.sqlDetail.query">
</div>