javascript - distinctUntilChanged() 在 Angular 6 中没有按预期工作

Question

我有一个返回可观察值的方法，如下所示

constructor(private _http: HttpClient) {}

getUsers(location){
   return this._http.get(`https://someurl?location=${location}`)
          .pipe(
              map((response: any) => response),
              distinctUntilChanged()
           )
}

(请假设已导入所有必需的依赖项)

所以为了显示用户的结果，我调用了loadUsers方法。

loadUsers(location){
   this.getUsers(location).subscribe( users => {
       this.userList = users;
    });
}

ngOnInit(){
    this.loadUsers('mumbai');
}

所以上面的代码为我加载了所有位于孟买的用户的用户列表。

现在我在 UI 上有一个位置列表，旁边有一个复选框

Mumbai,
Delhi,
Kerala

因此点击一个位置将调用以位置名称作为参数的 loadUsers 方法。

因此，当我再次从复选框中单击孟买时(在单击除孟买以外的任何其他复选框之前)，我不想再次加载属于孟买的用户，因为它已经在加载时加载了。

我读到在这种情况下可以使用 distinctUntilChanged()。但是它似乎对我不起作用，因为当我从复选框列表中选择孟买时，它仍然会从孟买调用 loadUsers

PS - 这不是真正的用例。以上描述只是为了让大家清楚我的问题。

我是 Angular 和 Rxjs 的新手。请帮忙。

Answer 1

您的 distinctUntilChanged 应用于 this._http.get() 返回的响应。如果你想阻止再次为同一位置调用 getUsers()，你将不得不稍微重写你的代码以使你的位置列表可见//push a next将位置放入主题中，以便您可以在此输入列表上使用 distinctUntilChanged。

const currentLocation = new Subject();
on('click', () => currentLocation.next(this.value)); // on your location list items checkboxes

currentLocation.pipe(
  distinctUntilChanged(),
  mergeMap(location => loadUsers(location)
)
.subscribe(users => {
  this.userList = users;
});

我已经遗漏了很多关于 Angular 样板，但我希望你能理解解决方案应该是什么的要点。