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}" 并附加

Answer 1

你的代码会像这样

[name]="'sqlQuery'+i"

完整代码

<input matInput placeholder="SQL Query" [name]="'sqlQuery'+i" [(ngModel)]="validationSteps[i].sqlDetail.query">

让我知道它是否有效。

Answer 2

就像任何其他绑定一样。在普通属性上使用 {{i}} 或在绑定属性上使用 [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>

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

Angular: I have an NgFor with an Index of loop, how can I assign the name of an element to be "myName+IndexOfLoop"

javascript

single-page-application

typescript

angular

angular8