title: rxjs combineLatest and Anguar2 change detection on Observable Arrays
body: <p>I am struggling a lot with some basic change detection inside my application. I have been at this for a couple of days and losing the will! I wonder if anyone here can point me in the right direction.</p>
  
  <p>I have a <code>group</code> with 2 <code>user</code> lists. One is for <code>members</code> and the other is for <code>moderators</code>.</p>
  
  <p>This method connects to the database to get a list of objects each with a <code>$key</code> value. Now I want to use those keys to go and get the actual <code>UserData</code> for each user. I tried everything and <code>combineLatest</code> is the only thing I could seem to get working.</p>
  
  <p>So both call the function and I am using an <code>async</code> pipe on my template. </p>
  
  <pre><code>members$ = myService.getMemberListByType("blah", "members");
  moderators$ = myService.getMemberListByType("blah", "moderators");
  </code></pre>
  
  <p>My function looks like this.</p>
  
  <pre><code>  private getMemberListByType(groupKey: string, memberType: string) {
  
      return this.af.database.list(`groups/${groupKey}/${memberType}`)
        .switchMap(userListKeyMap =&gt; {
  
          console.log("UserListKeyMap", memberType, userListKeyMap);
  
          let usersObservables: Observable&lt;UserData&gt;[] = [];
          userListKeyMap.forEach((object) =&gt; {
            usersObservables.push(this.af.database.object(`users/${object.$key}`)
              .map(UserData.fromJSON));
          });
  
          return Observable.combineLatest(usersObservables);
        });
  
    }
  </code></pre>
  
  <p>However, Angular does not detect changes to this list as following.  Say that a different method elsewhere removes a <code>member</code> and adds him to <code>moderator</code>. In this case, the <code>members</code> list is emitting a empty list of users <code>[]</code>. </p>
  
  <p>My *ngIf and *ngFor do not detect changes with this new empty object. The result is that the user (on the template) is now part of 2 lists but the data under this is perfectly accurate as highlighted by the log. </p>
  
  <p>I feel that when I combineLatest on an empty array, this is the source of my problem. Nothing can emit.... so how can Angular change? I don't know how to solve it though. Is there an alternative to combineLatest in this "empty" use case? Since I am using an <code>async</code> pipe, I need something that makes sense. </p>
  
  <p>Would anyone be able to shine a light on my issue?</p>
  
  <p>Thank you!</p>
  
  <p><strong>Update</strong></p>
  
  <p>I am convinced the problem is with angular2 not detecting an empty observable list. Specifically when an Observable Array has a value, but later that value becomes empty. Angular2 will not see the empty array. I have no way to solve this problem at this time. Either my approach is wrong, or something specific needs to happen to register an empty observable list?</p>
  
  <p><a href="https://i.stack.imgur.com/sSJGv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sSJGv.jpg" alt="screen of problem"></a></p>
  
  <ol>
  <li>Blue = The loaded state of the component is good, the user was a member. </li>
  <li>Green = The user was moved from member to manager/moderator. </li>
  <li>Red = This doesn't exist, so why is it still showing?</li>
  </ol>