adding ang removing row

I have a grid array of objects and it has default data from the database , now on the front end the data are being displayed on the table/grid and user can add row and delete row , when I add a row I only want to insert an empty object.

my issue is when I add a row duplicate ids are existing and when I delete only just a single row sometimes multiple rows are being deleted

What seem to be the issue of my implementation ? how do I delete and add rows without compromising the ids ? Thanks.

#grid data – from the database

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

#add and delete row code

 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>

Answer

If you are adding with the row length and removing by index you might get some weird cases.

For example, if you add two entries in your snippet, you will have 2 rows with ID 5. Therefore, when you filter/delete, you would remove two entries.

If you want change the order, always use the index to remove or add.

If you want to use ID, make sure the ID will always be unique.

Here is a possible solution making the ID random https://stackblitz.com/edit/angular-pebbqb?file=src/app/app.component.ts

Advertisement

Answer