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-table 列出所有注册的用户.用户可以点击按钮查看相应实体的详细信息.

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 属性并保存(例如)之后，user-detail 重定向到 user-list 组件.但是 md-table 显示的是旧信息.

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-table 刷新?

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屋！