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

Точно так же, как с любой другой привязкой. Или {{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>

Answer 2

Ваш код будет таким:

[name]="'sqlQuery'+i" 

Полный код

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

Дайте мне знать, работает он или нет.