Tengo un botón de agregar que permite repetir el código.
<div *ngFor="let detail of _detailRowNumber"> <mat-form-field appearance="fill"> <mat-label>Label of a detail</mat-label> <input matInput type="text"> </mat-form-field> <mat-form-field appearance="fill"> <mat-label>Description of a detail</mat-label> <input matInput> </mat-form-field> <button *ngIf="_detailRowNumber.length > 1" (click)="decreaseDetailRow(detail)" mat-fab color="primary" aria-label="Add a new row for a new detail"> <mat-icon>remove</mat-icon> </button> <button (click)="increaseDetailRow()" mat-fab color="primary" aria-label="Add a new row for a new detail"> <mat-icon>add</mat-icon> </button> </div> _detailRowNumber: Array<number> = [0]; increaseDetailRow(): void { this._detailRowNumber.push((this._detailRowNumber.length - 1) + 1); }Digamos que el código se repetirá 10 veces. Mi problema es que agrega el código siempre en la última posición, sin importar en qué botón de agregar esté haciendo clic. Lo que quiero es agregar el código justo después de la sección del botón en el que se ha hecho clic. ¿Cómo puedo hacer esto?
También lo he probado con el siguiente método pero no veo diferencia:
increaseDetailRow(index: number): void { this._detailRowNumber.splice(index, 0, index++); }Es normal que su código se agregue en la última posición, ya que eso es lo que push a una matriz. Si desea insertarlo en una posición específica, tiene razón para probar el splice de la matriz y pasar el valor del índice de ngFor . Eso debería funcionar, por ejemplo:
const arr = [1, 2, 3, 4]; arr.splice(1, 0, 3); console.log(test); - [1, 3, 2, 3, 4] Aquí hay un ejemplo rápido en stackblitz: https://stackblitz.com/edit/angular-ivy-oycdbk?file=src/app/app.component.html . Puede ver cómo cuando hace clic en el botón add , en la posición específica, el elemento con un index + 1 se agrega con éxito en esa posición/índice, por lo que creo que su lógica de splice también podría funcionar, pero lo está viendo mal. , ya que no hay mucha diferencia que pueda ver cuando está representando los mismos elementos con datos simulados.