角度材质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 { }}

来源

2017-07-24 Jackson Mourão

该表将重新呈现时connect()提供的流发出新的价值。

getAllUsers当它改变时需要发出一组新的数据。否则，监听来自_userService的单独流（例如dataChanged），并使用该流再次调用getAllUsers。

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

来源

2017-07-25 17:34:18

非常感谢您的回答。它使我朝正确的方向发现我的应用程序出了什么问题。我认为这两个答案对角度和材料2开始的人来说都是非常有价值的。 –

我不得不开发一个删除程序，然后我使用这种方法来获得所需的结果。唯一的是我必须在.switchMap之前在我的dataChanged observable中包含一个.Delay（250）。否则它会在实体框架完成更新它的缓存之前触发getAllUsers服务，并最终返回相同的旧数据。可能不是最好的方法，但这是我发现的唯一正确的方法。 –

我想你会希望dataChanged基于实体框架完成其任务，而不是触发数据库更改。如果您正在创建任意延迟，您正在询问竞争状况 –

实际上问题是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可观察值。

来源

2017-07-25 21:17:36

你可以收拾东西，把你的路由器导航的响应里面：

onSubmit() { 
this._updateSub = this._service.updateUser(this._id, 
this._userForm.value).subscribe(
    res => this._router.navigate(['/user']); 
    err => this.onSubmitError(err),() => this.afterSubmit()); 
}

来源

2017-07-26 14:03:50 Lakston

如果我这样做，我将在实体框架完成它的工作之前最终重定向。我曾尝试过。唯一可行的方法是，如果我重定向可观察完整。它给数据库留出时间进行更改并更新缓存。 –

角度材质2：如何在编辑记录后刷新md表？

回答

相关问题