Angular 7 / Material DataTable 在任何操作后都不会更新

Question

我正在使用 @angular/material 构建一个 Angular 7 应用程序。当我第一次加载应用程序时，Datatable 正确呈现，但是当我调用任何函数时，例如 - delUser，从数据库中删除用户后，它意味着立即呈现表，但直到我刷新了整个页面。我已经尝试了一切，但无济于事。

这是我的代码：

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();   
  });

}

Answer 1

也许你可以试试这个：

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;
});