Question

我们的应用程序有一个页面，用于在页面中将角色及其用户显示为UL列表。选择任何角色后，将填充用户列表。使用下面的服务调用来获取用户 -

public getUsers(roles: Any): Users { return service.getUsers(roles).subscribe((users) => this.userList = users; );)

问题是，上述功能的角色输入动态变化，因为当用户提取仍在进行中时，UI中的角色选择未被禁用，因此用户列表显示不正确的结果。

对于前。选择Role1和Role2，并进行服务器调用以获取用户。当服务器调用仍在进行中时，我现在取消选择Role1，但是我看到用户列表仍在使用Role1和Role2填充几秒钟，然后列表将与Role2的用户刷新。

这是因为请求是异步的，用户列表最初与Role1和Role2用户绑定，后来又与Role2用户绑定。在我们发起第二个请求或任何其他更好的方法时，有没有办法阻止正在进行的请求填充用户？

感谢您的帮助。

Answer 1

您可以利用Observable。

当您执行对服务器的调用以获取数据时，可以将其作为订阅存储在变量中。当你再试一次时unsubscribe来自它：

subscription: any;

getUsers(roles: Any): Users {
    if(this.subscription['getUsers']) {
        this.subscription['getUsers'].unsubscribe();
    }

    this.subscription['getUsers'] = service.getUsers(roles).subscribe(
        (users) => this.userList = users; 
    );
}

Answer 2

我们可以使用Observable取消请求。你的类似片段如下所示。 Plunkr link

    private request:any;
    search() {
      if (this.request) {
         this.request.unsubscribe();
      }
    this.request = this.searchService.search(this.searchField.value)
      .subscribe(
           result => { this.result = result.artists.items; },
           err => { this.errorMessage = err.message; },
           () => { console.log('Completed'); }
      );

   }

处理多个服务调用以绑定到Angular2中的列表

2 个答案: