角度材质2:如何在编辑记录后刷新md表?
问题描述:
所以我有一个用户列表组件和一个用户详细组件。角度材质2:如何在编辑记录后刷新md表?
用户列表组件具有列出所有注册用户的md表。用户可以点击按钮查看相应实体的详细信息。
在编辑Name属性并保存(例如)之后,用户细节重定向到用户列表组件。但是md表显示旧信息。
如何在编辑另一个组件中的实体(如本场景)后触发md表刷新?
这里是我的用户列表组件:
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()
提供的流发出新的价值。
getAllUsers
当它改变时需要发出一组新的数据。否则,监听来自_userService
的单独流(例如dataChanged
),并使用该流再次调用getAllUsers
。
connect(): Observable<UserVModel[]> {
return this._userService.dataChanged
.switchMap(() => this._userService.getAllUsers()
}
答
实际上问题是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可观察值。
答
你可以收拾东西,把你的路由器导航的响应里面:
onSubmit() {
this._updateSub = this._service.updateUser(this._id,
this._userForm.value).subscribe(
res => this._router.navigate(['/user']);
err => this.onSubmitError(err),() => this.afterSubmit());
}
+0
如果我这样做,我将在实体框架完成它的工作之前最终重定向。我曾尝试过。唯一可行的方法是,如果我重定向可观察完整。它给数据库留出时间进行更改并更新缓存。 –
非常感谢您的回答。它使我朝正确的方向发现我的应用程序出了什么问题。我认为这两个答案对角度和材料2开始的人来说都是非常有价值的。 –
我不得不开发一个删除程序,然后我使用这种方法来获得所需的结果。唯一的是我必须在.switchMap之前在我的dataChanged observable中包含一个.Delay(250)。否则它会在实体框架完成更新它的缓存之前触发getAllUsers服务,并最终返回相同的旧数据。可能不是最好的方法,但这是我发现的唯一正确的方法。 –
我想你会希望dataChanged基于实体框架完成其任务,而不是触发数据库更改。如果您正在创建任意延迟,您正在询问竞争状况 –