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

Question

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

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

编辑 Name 属性并保存（例如）后，用户详细信息重定向到用户列表组件。但是 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

当connect() 提供的流发出新值时，表格将重新呈现。

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

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

Answer 2

实际上，问题在于 User-Detail 组件在 observable 有机会完成之前就被重定向了。所以我把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 可观察对象即可获得最新值。

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