Question

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

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

编辑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需要在更改时发出一组新数据。否则，请从dataChanged收听单独的流（例如_userService）并使用该流再次呼叫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 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？

3 个答案: