Question

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

请指教。非常感谢。

Answer 1

应该是：

  async deleteUser(user: User): Promise<void>  {
    if(user){
      await this.userService.deleteUser(user);
      await this.getAllUsers();
    }
  }

请注意，手动调用ngOnInit挂钩会产生异味，同时ngOnInit也不会返回承诺，因此当deleteUser通过其他方式调用click时，也会出现竞争条件{1}}事件（包括测试）。

Answer 2

而不是

this.userService.deleteUser(user);
this.ngOnInit();

应该是

this.userService.deleteUser(user).then(res => this.ngOnInit());

Answer 3

deleteUser(user: User) {
    if(user){
      this.userService.deleteUser(user)
           .then(() => this.ngOnInit());
    }
  }

deleteUser函数服务正在返回一个promise，因此只有在解析了promise之后才需要调用onInit。

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

3 个答案: