我正在使用Chrome浏览器。我有一个表列表用户,并希望CRUD就可以了。尝试删除用户,有时数据重新加载是正常的,但有时候它没有改变(需要按f5,页面会显示最新数据) 在ts文件中:
deleteUser(user: User) {
if(user){
this.userService.deleteUser(user);
this.ngOnInit();
}
}
ngOnInit() { //when component loading get all users and set the users[]
this.getAllUsers();
}
getAllUsers() {
this.userService.getUsers().then(user =>
this.users = user
);
}
服务
deleteUser(user: User): Promise<void> {
const url = `${this.userUrl}/${user.id}`;
return this.http.delete(url, { headers: this.headers })
.toPromise()
.then(() => null)
.catch(this.handleError);
}
getUsers(): Promise<User[]> {
return this.http.get(this.userUrl)
.toPromise()
.then(response => response.json().content as User[])
.catch(this.handleError)
}
HTML
<button type="button" class="btn btn-warning" (click)="deleteUser(user)">Delete</button>
请指教。非常感谢。
答案 0 :(得分:2)
应该是:
async deleteUser(user: User): Promise<void> {
if(user){
await this.userService.deleteUser(user);
await this.getAllUsers();
}
}
请注意,手动调用ngOnInit
挂钩会产生异味,同时ngOnInit
也不会返回承诺,因此当deleteUser
通过其他方式调用click
时,也会出现竞争条件{1}}事件(包括测试)。
答案 1 :(得分:0)
而不是
this.userService.deleteUser(user);
this.ngOnInit();
应该是
this.userService.deleteUser(user).then(res => this.ngOnInit());
答案 2 :(得分:0)
deleteUser(user: User) {
if(user){
this.userService.deleteUser(user)
.then(() => this.ngOnInit());
}
}
deleteUser函数服务正在返回一个promise,因此只有在解析了promise之后才需要调用onInit。