angular - rxjs combineLatest 和 Anguar2 对 Observable 数组的变化检测

Question

我在我的应用程序中进行一些基本的更改检测时遇到了很多困难。我已经这样做了几天，失去了意志!我想知道这里是否有人可以指出正确的方向。

我有一个包含 2 个 user 列表的 group。一个用于成员，另一个用于版主。

此方法连接到数据库以获取对象列表，每个对象都有一个 $key 值。现在我想使用这些键去获取每个用户的实际 UserData。我尝试了所有方法，combineLatest 是我似乎唯一可以开始工作的东西。

所以两者都调用函数，我在我的模板上使用 async 管道。

members$ = myService.getMemberListByType("blah", "members");
moderators$ = myService.getMemberListByType("blah", "moderators");

我的函数看起来像这样。

  private getMemberListByType(groupKey: string, memberType: string) {

    return this.af.database.list(`groups/${groupKey}/${memberType}`)
      .switchMap(userListKeyMap => {

        console.log("UserListKeyMap", memberType, userListKeyMap);

        let usersObservables: Observable<UserData>[] = [];
        userListKeyMap.forEach((object) => {
          usersObservables.push(this.af.database.object(`users/${object.$key}`)
            .map(UserData.fromJSON));
        });

        return Observable.combineLatest(usersObservables);
      });

  }

但是，Angular 不会检测到此列表的更改，如下所示。假设其他地方的不同方法删除了一个 member 并将他添加到 moderator。在这种情况下，members 列表发出一个空的用户列表 []。

我的 *ngIf 和 *ngFor 没有检测到这个新的空对象的变化。结果是用户(在模板上)现在是 2 个列表的一部分，但其下的数据完全准确，如日志中突出显示的那样。

我觉得当我在一个空数组上 combineLatest 时，这就是我的问题的根源。什么都不能发出……那么 Angular 怎么改变呢？我不知道如何解决它。在这个“空”用例中是否有 combineLatest 的替代方案？因为我使用的是 async 管道，所以我需要一些有意义的东西。

任何人都可以阐明我的问题吗？

谢谢!

更新

我确信问题出在 angular2 没有检测到一个空的可观察列表。特别是当 Observable Array 有一个值，但后来该值变为空时。 Angular2 不会看到空数组。我目前没有办法解决这个问题。是我的方法有误，还是需要发生一些特定的事情来注册一个空的可观察列表？

1. 蓝色 = 组件的加载状态良好，用户是成员(member)。
2. 绿色 = 用户已从成员移至管理员/版主。
3. 红色 = 这不存在，为什么它仍然显示？

Answer 1

有一个简单的解决方法:

  private getMemberListByType(groupKey: string, memberType: string) {

    return this.af.database.list(`groups/${groupKey}/${memberType}`)
      .switchMap(userListKeyMap => {

        console.log("UserListKeyMap", memberType, userListKeyMap);

        let usersObservables: Observable<UserData>[] = [];
        userListKeyMap.forEach((object) => {
          usersObservables.push(this.af.database.object(`users/${object.$key}`)
            .map(UserData.fromJSON));
        });

        return usersObservables.length > 0 ? Observable.combineLatest(usersObservables) : Observable.of([]);
      });
 }