TypeScript:删除用户时有时不显示最新数据

时间:2017-11-16 14:50:57

标签: angular typescript

我正在使用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>

请指教。非常感谢。

3 个答案:

答案 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。