angularfire2 rxjs 通过动态更新从两个表中加入 observable

Question

所以我有两个表。其中之一是我的用户，它存储 block 另一个存储这些 block 的数据。

我正在尝试正确组合这些，因此在我的组件中，我根据 dataID 获得了 block 列表及其数据

- user
    - blocks
        - block1
            - blockSize
            - blockOptions
                - dataID
        - ...

- data
  - dataId1
      - stuff ...
  - ...

使用以下代码我得到了我的 block 和数据，但数据节点仍然是一个 FirebaseObervable。所以我必须在我的dumb组件中使用异步。我要问的是如何正确组合这些，以便我只需要使用异步管道并将数据推送到子组件。同时不丢失动态变化。

return this.db.list(`/user/${this.userId}/blocks`).switchMap((blocks:Block[]) => {
  let blockData$ = blocks.map(block => {        
      return this.db.object(`/data/${block.blockOptions.dataID}`)
  });
  return Observable.combineLatest(blockData$,blocks, (bData,block) => {
    block.data = bData;
    return blocks;
  });
})

模板示例

//what I want to happen
*ngFor="let block of blocks | async">
<dumb-component [blockData] = "block.data"></dumb-component>

//what I have to do now
*ngFor="let block of blocks | async">
<dumb-component [blockData] = "block.data | async"></dumb-component>

提前致谢，我觉得非常接近任何朝着正确方向的插入

Answer 1

你很接近。只有 Observable.combineLatest 调用需要一些更改:

return this.db.list(`/user/${this.userId}/blocks`)
  .switchMap((blocks: Block[]) => {
    let arrayOf$ = blocks.map(block => {
      return this.db.object(`/data/${block.blockOptions.dataID}`)
    });
    return Observable.combineLatest(arrayOf$, (...arrayOfData) => {
      blocks.forEach((block, index) => {
        block.data = arrayOfData[index];
      });
      return blocks;
    });
  });

您对 blocks.map 的调用返回一个可观察值数组，因此您要使用的 combineLatest 签名是 this one :

export function combineLatest<T, R>(
  array: ObservableInput<T>[],
  project: (...values: Array<T>) => R,
  scheduler?: IScheduler
): Observable<R>;

您将一组可观察值传递给它，它会使用结果调用您的项目函数。只需将它们收集到一个数组中，迭代您的 block ，然后将结果分配到适当的索引处。

---

如果您正在使用 ngrx 或 OnPush 更改检测，您应该确保不会对 block 数组或 block 本身进行更改。为了避免突变，combineLatest 调用应该是这样的:

return Observable.combineLatest(arrayOf$, (...arrayOfData) => {
  return blocks.map((block, index) => {
    const data = arrayOfData[index];
    if (block.data !== data) {
        // If the block has no data or if the data has changed,
        // copy the block to avoid mutating it.
        return Object.assign({}, block, { data });
    }
    return block;
  }
});