Angular 7 / Material DataTable not updating after any operation

Question

I'm building an Angular 7 application using @angular/material. When I load the application for the first time, the Datatable renders correctly, but when I call any function, example - delUser, after deleting a user from the database, it's meant to render the table immediately, but it doesn't until I refresh the whole page. I've tried everything, but to no avail.

Here's my code:

import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
import { UserService } from 'src/app/services/user.service';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { MatPaginator } from '@angular/material/paginator';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {

  pgtitle:string = "Manage Users";

  dataSource:any;
  displayedColumns:string[] = ['userName','email','roleId','userType','Actions'];

    @ViewChild(MatSort, {static: true}) sort: MatSort;
    @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(
    private service:UserService
  ){}      

  ngOnInit(): void {
    this.getAllUsers();
  }    

  applyFilter(filterValue:String){
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  getAllUsers(){   
    this.service.getAllUsers().subscribe( result => {
        this.dataSource = new MatTableDataSource(result); 
        this.dataSource.paginator = this.paginator; 
        this.dataSource.sort = this.sort;
    });
  } 

  delUser(id){
    this.service.deleteUser(id).subscribe(result => {
    this.getAllUsers();   
  });

}

Possible duplicate -- https://stackoverflow.com/questions/60414162/how-do-i-add-a-custom-column-to-angular-material-table/60414822#60414822 — Amit, Feb 27 '20 at 14:11
@Amit done that already - thats exactly what i'm doing here, replace data with result in my approach, and its the same thing. — Ande Caleb, Feb 27 '20 at 14:14
Can you create a stackblitz for the same reproducing the error — Amit, Feb 27 '20 at 14:15
when you call deleteUser method. Are you sure you have a data and not an error? — akushylun, Feb 27 '20 at 15:19
@akushylun i have data.. no errors, my api's function properly — Ande Caleb, Feb 27 '20 at 15:30
when subscribing try to set this.dataSource to null or undefined before assigning new MatTableDataSource() this worked for me using matTrees — mikegross, Feb 27 '20 at 15:33
also check when you call getAllUsers second time, do you have one less user. may be the problem is on back-end side which doesn't delete user correctly — akushylun, Feb 27 '20 at 15:34
@mikegross i'd appreciate you add code, because i've done that, may be not the way you are saying.. but still not working. — Ande Caleb, Feb 27 '20 at 15:50
Ande, some pro tips for posting: (a) please use an English spell-checker, so that your post does not need much repair; (b) please try to refrain from begging and pleading. Readers know that you need help, and begging isn't going to get volunteers to move any faster; (c) please do not ask for free work ("i'd appreciate you add code"). Readers will be more likely to help you if you have helped yourself first. — halfer, Feb 29 '20 at 11:27

score 0 · Answer 1 · answered Feb 28 '20 at 16:34

Maybe you can try this:

this.service.getAllUsers().subscribe( result => {
    this.dataSource = null; //add this
    this.dataSource = new MatTableDataSource(result); 
    this.dataSource.paginator = this.paginator; 
    this.dataSource.sort = this.sort;
});

Angular 7 / Material DataTable not updating after any operation

1 Answers1