Angular Material 2：如何在编辑记录后刷新md-table？

Question

所以我有一个用户列表组件和一个用户详细信息组件。

用户列表组件有一个 md-table 列出所有注册的用户。用户可以单击按钮查看相应实体的详细信息。

编辑名称属性并保存（例如）后，用户详细信息重定向到用户列表组件。但是 md-table 显示旧信息。

在这种情况下，如何在另一个组件中编辑实体后触发 md-table 刷新？

这是我的用户列表组件：

export class UserListComponent implements OnInit {
tableDisplayedColumns: string[] = ['userName', 'email', 'options'];
userDataSource: UserDataSource;

constructor(private _userService: UserService, private _router: Router) { }

ngOnInit(): void {
    this.userDataSource = new UserDataSource(this._userService);
}}



class UserDataSource extends DataSource<UserVModel> {
constructor(private _userService: UserService) { 
    super();
}

connect(): Observable<UserVModel[]> {
    return this._userService.getAllUsers();
}

disconnect(): void { }}

Answer 1

table 将在 connect() 提供的流发出新值时重新呈现。

getAllUsers 需要在更改时发出一组新数据。否则，从 _userService 中监听一个单独的流（例如 dataChanged）并使用它再次调用 getAllUsers。

connect(): Observable<UserVModel[]> {
  return this._userService.dataChanged
      .switchMap(() => this._userService.getAllUsers()
}

Answer 2

实际上问题在于 User-Detail 组件在可观察对象有机会完成之前进行了重定向。所以我把 router.navigate 作为一个完整的函数。

之前的代码

onSubmit() {
    this._updateSub = this._service.updateUser(this._id, this._userForm.value)
                                        .subscribe(null, err => this.onSubmitError(err));
    this._router.navigate(['/user']);
}

代码在

之后

onSubmit() {
    this._updateSub = this._service.updateUser(this._id, this._userForm.value)
                                        .subscribe(null, err => this.onSubmitError(err), () => this.afterSubmit());
}
afterSubmit() {
    this._router.navigate(['/user']);
}

在此更改之前，我在重定向后得到的是旧值。使用完整的函数，我无需在服务中使用 dataChanged observable 即可获得最新值。

Answer 3

您可以整理一下并将您的路由器导航放在响应中：

onSubmit() {
this._updateSub = this._service.updateUser(this._id, 
this._userForm.value).subscribe(
   res => this._router.navigate(['/user']);
   err => this.onSubmitError(err), () => this.afterSubmit());
}

Angular Material 2：如何在编辑记录后刷新md-table？

Angular Material 2: How to refresh md-table after editing a record?

angular-material2