angularfire2 rxjs join observables from two tables with dynamic updates

So I have two tables. One of which is my user which stores blocks The other stores the data for these blocks.

I am trying to combine these correctly so in my component I get a list of blocks with their data according to dataID

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

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

With the following code I get my blocks and data but the data node is still a FirebaseObervable. So I have to use the async in my dumb components. What I am asking is how do I combine these correctly so I only have to use the async pipe and push the data to subcomponents. While not losing dynamic changes.

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;
  });
})

Template example

//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>

Thanks in advance I feel really close any nudge in the right direction would be appreciated