Angular 7 / Material DataTable не обновляется после какой-либо операции - PullRequest
Новая
       3

Angular 7 / Material DataTable не обновляется после какой-либо операции

0 голосов
/ 27 февраля 2020

Я создаю приложение Angular 7, используя @angular/material. Когда я загружаю приложение в первый раз, Datatable отрисовывается правильно, но когда я вызываю любую функцию, например - delUser, после удаления пользователя из базы данных, это означает, что таблица должна отображаться немедленно, но до тех пор, пока Я перефразирую sh всю страницу. Я перепробовал все, но безрезультатно.

Вот мой код: 

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

}

1 Ответ

0 голосов
/ 28 февраля 2020

Может быть, вы можете попробовать это: 

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