rxjs combine在Observable Arrays上檢測最新和Anguar2變化

Question

我在應用程序內部進行了一些基本的變化檢測，我掙扎了很多。我已經在這裏呆了兩天，失去了意志！我想知道這裏有沒有人能指出我正確的方向。

我有一個group與2 user名單。一個是members，另一個是moderators。

此方法連接到數據庫以獲取每個對象的列表，其值爲$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列表正在發出一個空的用戶列表[]。

My * ngIf和* ngFor不檢測這個新的空對象的變化。結果是用戶（在模板上）現在是2個列表的一部分，但是這個數據下的數據非常準確，如日誌所示。

我覺得當我在一個空的數組上組合最大值時，這是我的問題的根源。什麼都不能發出....所以角度如何改變？我不知道如何解決它。在這個「空白」用例中有沒有其他的方法可以組合使用？由於我使用的是async管道，我需要一些有意義的東西。

任何人都可以照亮我的問題？

謝謝！

更新

我相信這個問題是不是angular2檢測空觀察的名單。特別是當一個Observable數組有一個值時，但後來該值變空。 Angular2不會看到空數組。目前我無法解決這個問題。要麼我的方法是錯誤的，要麼就是需要註冊一個空的可觀察列表？

1. 藍色=組件的加載狀態是好的時，用戶是一個成員。
2. Green =用戶已從成員移到經理/主持人。
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([]); 
     }); 
} 

Answer 2

你應該嘗試這樣的事：

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

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

      // Force the source obs to complete to let .toArray() do its job. 
      .take(1) 

      // At this point, the obs emits a SINGLE array of ALL users. 
      .do(userList => console.log(userList)) 

      // This "flattens" the array of users and emits each user individually. 
      .mergeMap(val => val) 

      // At this point, the obs emits ONE user at a time. 
      .do(user => console.log(user)) 

      // Load the current user 
      .mergeMap(user => this.af.database.object(`users/${user.$key}`)) 

      // At this point, the obs emits ONE loaded user at a time. 
      .do(userData => console.log(userData)) 

      // Transform the raw user data into a User object. 
      .map(userData => User.fromJSON(userData)) 

      // Store all user objects into a SINGLE, final array. 
      .toArray(); 

} 

注意。以do()開頭的行只是爲了解釋發生了什麼。無需將它們保留在最終代碼中。

Answer 3

你的方法對我來說似乎是正確的。使用帶空數組的combineLatest()不應以錯誤結尾（類似於例如forkJoin，使用空數組是一個有效的用例）。然後，即使它完成，因爲你使用的空數組switchMap，所以這應該不是我想的問題。

我沒有與任何AngularFire2經驗，所以我不知道是否this.af.database.object只發出一次所有項目，然後完成或它發出的每一個變化值（這可能是你想要什麼，如果我猜測）。

反正用combineLatest()或forkJoin()一個非常普遍的問題是，它們的源觀測量總是要發射至少一個項目。換言之，如果this.af.database.object中的任何一個爲空，那麼combineLatest()將不會發射任何東西。

您可以確保至少有一個值爲startWith()。比如像下面這樣：

userListKeyMap.forEach((object) => { 
    usersObservables.push(this.af.database.object(`users/${object.$key}`) 
     .startWith('{}') 
     .map(UserData.fromJSON)); 
}); 

如果這沒有幫助請嘗試使用剛剛Observable.timer()代替this.af.database.object或this.af.database.list確保Angular2訂閱它，即使保持新項目時所發出的訂閱。

Answer 4

嘗試觀測名單上使用forkJoin

let userListKeyMap$ = Rx.Observable.of([{key:1}, {key:2}, {key:3}]); //mock keys 
 
let requestUserFromKey = (key) => Rx.Observable.of({user: key}).delay(1000); //mock users 
 

 
let result$ = userListKeyMap$.switchMap((userKeys) => 
 
Rx.Observable.forkJoin(userKeys.map(uk => requestUserFromKey(uk.key)))); 
 

 
result$.subscribe((users) => console.log('got some users: ', users));

<script src="https://unpkg.com/rxjs/bundles/Rx.min.js"></script>