Angular Material 2:如何在编辑记录后刷新md-table? [英] Angular Material 2: How to refresh md-table after editing a record?

问题描述

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

So I have a user-list component and a user-detail component.

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

The user-list component has an md-table listing all users registered. The user is able to click on a button to see the details of the corresponding entity.

在编辑Name属性并保存后(例如)，用户详细信息将重定向到用户列表组件.但是md表会显示旧信息.

After editing the Name property and saving (for example), the user-detail redirects to the user-list component. But the md-table displays the old information.

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

How can I trigger an md-table refresh after editing the entity in another component like this scenario?

这是我的用户列表组件:

Here is my user-list component:

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 { }}

推荐答案

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

The table will re-render when the stream provided by connect() emits a new value.

getAllUsers在更改时需要发出一组新数据.否则，请侦听来自_userService的单独流(例如dataChanged)，然后使用该流再次调用getAllUsers.

getAllUsers needs to emit a new set of data when it is changed. Otherwise, listen for a separate stream (e.g. dataChanged) from the _userService and use that to call getAllUsers again.

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

这篇关于Angular Material 2:如何在编辑记录后刷新md-table?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！