Tengo una matriz de cuadrícula de objetos y tiene datos predeterminados de la base de datos, ahora en la parte frontal, los datos se muestran en la tabla/cuadrícula y el usuario puede agregar filas y eliminar filas, cuando agrego una fila solo quiero insertar un objeto vacío.

mi problema es cuando agrego una fila, existen identificaciones duplicadas y cuando elimino solo una fila, a veces se eliminan varias filas

¿Cuál parece ser el problema de mi implementación? ¿Cómo elimino y agrego filas sin comprometer las identificaciones? Gracias.

#datos de cuadrícula - de la base de datos

 gridTableData [ { "id": 0, "demos": "21 Est. Pop", }, { "id": 1, "demos": "Households", }, { "id": 5, "demos": "Avg HH Inc", }, ]

#agregar y eliminar código de fila

 deleteRow(id: number) { const filteredDemographics = this.gridTableData.filter(s => s.id !== id); this.gridTableData = [...filteredDemographics]; } addRow() { this.gridTableData.push({id:this.gridTableData.length}); console.log("this.gridTableData" , this.gridTableData) }

#html

 <tbody *ngIf="gridTableData.length > 0"> <tr *ngFor="let row of gridTableData;let i = index" [ngClass]="{'row-is-editing':isRowEditing(i)}"> <td> <button *ngIf="checkIfExistsOnDefaultGrid(row) === false" class="material-icons-outlined" mat-icon-button color="error" (click)="deleteRow(row.id)"> <mat-icon>delete_outline</mat-icon> </button> </td> </tr> </tbody>