如何展平数组并从CombineLatest（...）的结果中删除空数组？

Question

我正在使用angular 6应用程序。 我有一个函数，它返回可观察变量数组的可观察变量，而后者又是数组的可观察变量。

结果可能如下所示：

[
  [],
  [],
  [object, object],
  [],
  [object],
  [],
  [object, object, object],
  []
]

如您所见，它是一个数组数组，有些数组可能为空。

我想列出页面上每个内部数组中的每个对象，如下所示：

<div *ngFor="let watcher of InvitationService.getInvitations() | async">
  <div *ngFor="let invitation of watcher">
    {{ invitation | json }}
  </div>
</div>

getInvitations（）看起来像这样：

getInvitations() {
  const groupedInvitations$: Observable<any>[] = [];
  groups.forEach(group => {
    const groupInvites$ = this._firestoreService.collection(`GroupInvitations/${group.groupID}/Invites`);
    groupedInvitations$.push(groupInvites$);
  });
  Return Observable.combineLatest(groupedInvitations$);
}

我想做的是从combinateLatest（…）返回的结果中删除空数组，并将其余部分展平为一个一维数组。

我知道可以通过管道映射（...）或flatMap（...）或类似的方式来做到这一点。 但是我一直在尝试类似的事情，但是没有任何效果。

例如，我已经尝试过了：

Return Observable.combineLatest(groupedInvitations$).pipe(
  map(item => {
    console.log(item);
  });
);

但是没有任何内容记录到控制台。

如何展平数组并删除空数组？ 谢谢。

Answer 1

如我所见，您可以在此行之前放置一个if条件groupedInvitations $ .push（groupInvites $）; 检查数组长度是否大于零（如果是），如果不是，则将其添加到返回的数组中

希望能有所帮助

Answer 2

首先尝试使用filter删除空数组，然后使用combineLatest将它们全部组合在一起。

combineLatest(
    groupedInvitations$.pipe(
        filter(item => item.length > 0)
    )
).pipe(
    tap(item => { // Should be an array of arrays
        console.log(item);
    });
);