Ionic Angular中FormArray动态项标签编号不递增问题修复问询

问题根源 #

你当前的代码中，每次调用numeroElementos(0)都会固定返回1——因为始终传入参数0，完全没有利用*ngFor循环提供的索引值，导致所有输入框标签都显示为TituloQueHacer1。

修复方案 #

直接使用*ngFor的index变量生成递增编号，无需额外的TS方法，逻辑更简洁高效：

修改后的HTML代码片段 #

<div formArrayName="tituloQueHacer">
  <div *ngFor="let control of getTituloQueHacerControls(); let i = index">
    <ion-item>
      <ion-input label="Título Que Hacer {{ i + 1 }}" [clearInput]="true" placeholder="Añade el titulo de Que Hacer" [formControlName]="i"></ion-input>
    </ion-item>
  </div>
</div>

可选：保留TS方法的修复方式 #

如果一定要保留numeroElementos方法，只需传入循环的index而非固定的0即可：

修改后的HTML

<div formArrayName="tituloQueHacer">
  <div *ngFor="let control of getTituloQueHacerControls(); let i = index">
    <ion-item>
      <ion-input label="Título Que Hacer {{ numeroElementos(i) }}" [clearInput]="true" placeholder="Añade el titulo de Que Hacer" [formControlName]="i"></ion-input>
    </ion-item>
  </div>
</div>

TS方法可保持不变（或简化为直接返回numero + 1）

说明 #

• *ngFor的index从0开始，i + 1即可得到从1开始的连续编号
• 移除不必要的方法调用能提升模板渲染效率，同时逻辑更直观清晰

内容的提问来源于stack exchange，提问作者José Manuel Ruíz Bolaños