node.js - Angular 7 / Material DataTable 在任何操作后都不会更新
问题描述
我正在使用@angular/material
. 当我第一次加载应用程序时,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();
});
}
解决方案
也许你可以试试这个:
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;
});
推荐阅读
- node.js - 已解决 Sequelize 在使用聚合函数时获取另一列的数据
- python - 如何将多个系列组合成一个数组或一列数据框?
- c# - 为什么同一页面的每个页面加载后内存使用量都会增加
- python - 您可以通过将一行中的所有单元格值设置为“无”来使用 openpyxl 删除 Python 中的行吗?
- react-native - 使用 mapDispatchToProps 将当前状态从一个屏幕传递到另一个屏幕
- python - Python 导入突然失败
- java - 使用 REST API 的后端事务
- github-pages - 如何解决GitHub页面创建过程中“无法检索域的DNS记录”?
- css - 如何修复容器采用 ::after 样式
- graphql - 如何修复“语法错误:预期名称,在 GraphQL 中找到字符串“查询”