Angular 8 - Material Table not displaying correct data on delete

Question

I have a material table that displays available options in the form of selects.

I have a root object which is the ngModel and serves to keep the options.

The options are retrieved from a database.

So lets say i have a root item of menu. This keep tracks of drinks and fruits in an array called snacks like so:

this.menu =
  {
    id: 1,
    snacks: [
      { fruitId: 1, drinkId: 1, deleted: false },
      { fruitId: 2, drinkId: 2, deleted: false },
      { fruitId: 3, drinkId: 2, deleted: false },
      { fruitId: 3, drinkId: 2, deleted: true },
    ]
  };

And then we define some fruits and drinks the user can choose:

this.fruits = [
  { id: 1, name: "Orange" },
  { id: 2, name: "Apple" },
  { id: 3, name: "Banana" },
  { id: 4, name: "Dragon fruit" }
];
this.drinks = [
  { id: 1, name: "Milk" },
  { id: 2, name: "Water" },
  { id: 3, name: "Juice" },
  { id: 4, name: "Soda" }
];

Then we map those in the table:

<table mat-table [dataSource]="menuTableSource" #menuTable>

                        <ng-container matColumnDef="fruit">
                            <th mat-header-cell *matHeaderCellDef> Fruit </th>
                            <td mat-cell *matCellDef="let menuItem; let i = index;">
                                <mat-select [(ngModel)]="menu.snacks[i].fruitId" name="fruitId"
                                    #fruitId="ngModel">
                                    <mat-option *ngFor="let fruit of fruits" [value]="fruit.id">
                                        {{ fruit.name }}
                                    </mat-option>
                                </mat-select>
                            </td>
                        </ng-container>

                        <ng-container matColumnDef="drink">
                            <th mat-header-cell *matHeaderCellDef> Drink </th>
                            <td mat-cell *matCellDef="let menuItem; let i = index;">
                                <mat-select [(ngModel)]="menu.snacks[i].drinkId"
                                    name="drinkId" required>
                                    <mat-option *ngFor="let drink of drinks" [value]="drink.id">
                                        {{drink.name}}
                                    </mat-option>
                                </mat-select>
                            </td>
                        </ng-container>

                    <tr mat-header-row *matHeaderRowDef="menuTableColumns"></tr>
                    <tr mat-row *matRowDef="let row; columns: menuTableColumns;"></tr>
</table>

Upon removing an item from this array and setting the table source data to this and calling renderRows() the table will drop the last entry even though the array of snacks is updated as expected.

onRemoveMenuItem(menuItem: any): void {
const idx = this.menu.snacks.indexOf(menuItem);
if (idx >= 0) {
  this.menu.snacks[idx].deleted = true;
  this.menuTableSource.data = this.menu.snacks.filter(x => !x.deleted);
  this.menuTable.renderRows();
  }
}

Is this a bug or do I have to update the table in some other way?

Please see this stackblitz which demonstrates the isssue: https://stackblitz.com/edit/angular-bzdjhj

Maihan Nijat · Accepted Answer · 2019-09-09 14:17:49Z

1

Updated: After looking to your code again. What I realized is that you are removing the right row and your data updates just fine but since you are displaying select dropdowns items from the fruits which creates confusion for you.

<ng-container matColumnDef="fruit">
  <th mat-header-cell *matHeaderCellDef> Fruit </th>
  <td mat-cell *matCellDef="let menuItem; let i = index;">
<mat-select [(ngModel)]="menu.snacks[i].fruitId" name="fruitId"
#fruitId="ngModel">
<mat-option *ngFor="let fruit of fruits" [value]="fruit.id">
  {{ fruit.name }}
</mat-option>
</mat-select>
</td>
</ng-container>

If you delete first item, the second item again shows orange in the select list because of this <mat-option *ngFor="let fruit of fruits" [value]="fruit.id">.

>>> Update Ends

You can do this with passing the index of menu item and removing the item from the menu using the index passed.

Pass the index:

<ng-container matColumnDef="remove">
    <th mat-header-cell *matHeaderCellDef> &nbsp; </th>
    <td mat-cell *matCellDef="let menu; let i = index">
        <span class="fill-remaining-space"></span>
        <button mat-stroked-button color="primary" (click)="onRemoveMenuItem(i)">Remove</button>
    </td>
</ng-container>

And your logic would be:

onRemoveMenuItem(i): void {
  this.menu.snacks.splice(i, 1);
  this.menuTableSource.data = this.menu.snacks;
  this.menuTable.renderRows();
}

You can later the property of the item if you do not want to remove it but just add property deleted for your other processes.

edited Sep 9, 2019 at 14:17

answered Sep 9, 2019 at 12:48

Maihan Nijat

9,36313 gold badges69 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

HenrikM Over a year ago

There's no way to filter out the deleted items (and keep them in the collection) while updating the data?

Maihan Nijat Over a year ago

@HenrikM You are doing it absolutely right. You just need to review your data structures. The code is working as you expect.

HenrikM Over a year ago

"If you delete first item, the second item again shows orange in the select list because of this" - why does the select display that value since it's no longer part of the datasource data?

HenrikM · Accepted Answer · 2019-09-10 12:00:25Z

Looking at the issue again I realize I might be a bit of an idiot.

Maihan pointed me in the right direction.

Of course binding to the ngModel doesn't work because ngModel operates on the unfiltered collection.

But since I'd like to keep a reference to the deleted items I added a new array.

deletedSnacks = [];

And in my removeMenuItem function I push the snacks into that array, splice them and then upon submittning to the backend i simply concat them.

onRemoveMenuItem(menuItem: any): void {
const idx = this.menu.snacks.indexOf(menuItem);
if (idx >= 0) {
  this.menu.snacks[idx].deleted = true;
  this.deletedSnacks.push(this.menu.snacks[idx]);
  this.menu.snacks.splice(idx, 1);
  this.menuTableSource.data = this.menu.snacks;
  this.menuTable.renderRows();
  }
}

Collectives™ on Stack Overflow

Angular 8 - Material Table not displaying correct data on delete

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related