Rxjs 使用AngularFire2，如何转换包含其他可观察项的ObservableList中的数据

我对这有点陌生，所以请容忍我。我会尽力解释的。我正在使用AngularFire2和。在我的例子中，我试图获取与帐户相关联的事务列表（请参见下面的示例数据）

样本数据

accounts: {
  account1: {
    name: "Account 1",
    transactions: {
      transaction1: {
        date: somedate
      },
      transaction2: {
        date: somedate
      }
    }
  }
}

transactions: {
  transaction1: {
    name: "Transaction 1"
  },
  transaction2: {
    name: "Transaction 2"
  },
  transaction3: {
    name: "Transaction 3"
  }
}

我的第一步是从帐户中获取交易列表：

af.database.list('/accounts/account1/transactions');

这给了我一个可以观察到的物体阵列，比如：

[Object, Object]

af.database.list('/accounts/account1/transactions')
.map(res => {
  return res.map(items => {
    return af.database.list('/transactions/items.$key');
  })
})

[Observable, Observable]

<ul>
  <li *ngFor="let transaction of transactions | async">{{ (transaction | async)?.name }}</li>
</ul>

af.database.list('/accounts/account1/transactions')
.map(res => {
  return res.map(transaction => {
    transaction.details = af.database.list('/transactions/' + transaction.$key);
    transaction.account = af.database.list('/accounts/' + accountKey);
  })
})

{
  date: somedate,
  details: Observable,
  account: Observable
}

{
  date: somedate,
  name: "Transaction 1",
  accountName: "Account 1"
}

然后，我想用来自transactions节点的实际事务细节完全替换这两个对象。比如说：

[Object, Object]

af.database.list('/accounts/account1/transactions')
.map(res => {
  return res.map(items => {
    return af.database.list('/transactions/items.$key');
  })
})

[Observable, Observable]

<ul>
  <li *ngFor="let transaction of transactions | async">{{ (transaction | async)?.name }}</li>
</ul>

af.database.list('/accounts/account1/transactions')
.map(res => {
  return res.map(transaction => {
    transaction.details = af.database.list('/transactions/' + transaction.$key);
    transaction.account = af.database.list('/accounts/' + accountKey);
  })
})

{
  date: somedate,
  details: Observable,
  account: Observable
}

{
  date: somedate,
  name: "Transaction 1",
  accountName: "Account 1"
}

这类东西让我得到了我想要的，除了我现在有了一个可观察的数组，而不是像这样的对象：

[Object, Object]

af.database.list('/accounts/account1/transactions')
.map(res => {
  return res.map(items => {
    return af.database.list('/transactions/items.$key');
  })
})

[Observable, Observable]

<ul>
  <li *ngFor="let transaction of transactions | async">{{ (transaction | async)?.name }}</li>
</ul>

af.database.list('/accounts/account1/transactions')
.map(res => {
  return res.map(transaction => {
    transaction.details = af.database.list('/transactions/' + transaction.$key);
    transaction.account = af.database.list('/accounts/' + accountKey);
  })
})

{
  date: somedate,
  details: Observable,
  account: Observable
}

{
  date: somedate,
  name: "Transaction 1",
  accountName: "Account 1"
}

只要我使用async和Elvis运算符，我就可以在我的模板中使用它，如下所示：

[Object, Object]

af.database.list('/accounts/account1/transactions')
.map(res => {
  return res.map(items => {
    return af.database.list('/transactions/items.$key');
  })
})

[Observable, Observable]

<ul>
  <li *ngFor="let transaction of transactions | async">{{ (transaction | async)?.name }}</li>
</ul>

af.database.list('/accounts/account1/transactions')
.map(res => {
  return res.map(transaction => {
    transaction.details = af.database.list('/transactions/' + transaction.$key);
    transaction.account = af.database.list('/accounts/' + accountKey);
  })
})

{
  date: somedate,
  details: Observable,
  account: Observable
}

{
  date: somedate,
  name: "Transaction 1",
  accountName: "Account 1"
}

好的，这实际上是可行的，但是现在我想转换这些数据，这样我的服务返回的东西会更干净一些。在下面的示例数据中，您没有看到的是，交易和账户中都有大量的数据点。我不需要或不想在回复中包含这些内容，所以我想稍微清理一下。最后，我想用一个可观察的对象数组来响应，就像最初的angularfire2调用一样。现在我有一个可观察的物体阵列，看起来像这样：

[Object, Object]

af.database.list('/accounts/account1/transactions')
.map(res => {
  return res.map(items => {
    return af.database.list('/transactions/items.$key');
  })
})

[Observable, Observable]

<ul>
  <li *ngFor="let transaction of transactions | async">{{ (transaction | async)?.name }}</li>
</ul>

af.database.list('/accounts/account1/transactions')
.map(res => {
  return res.map(transaction => {
    transaction.details = af.database.list('/transactions/' + transaction.$key);
    transaction.account = af.database.list('/accounts/' + accountKey);
  })
})

{
  date: somedate,
  details: Observable,
  account: Observable
}

{
  date: somedate,
  name: "Transaction 1",
  accountName: "Account 1"
}

我真的很想有更像这样的东西：

[Object, Object]

af.database.list('/accounts/account1/transactions')
.map(res => {
  return res.map(items => {
    return af.database.list('/transactions/items.$key');
  })
})

[Observable, Observable]

<ul>
  <li *ngFor="let transaction of transactions | async">{{ (transaction | async)?.name }}</li>
</ul>

af.database.list('/accounts/account1/transactions')
.map(res => {
  return res.map(transaction => {
    transaction.details = af.database.list('/transactions/' + transaction.$key);
    transaction.account = af.database.list('/accounts/' + accountKey);
  })
})

{
  date: somedate,
  details: Observable,
  account: Observable
}

{
  date: somedate,
  name: "Transaction 1",
  accountName: "Account 1"
}

所以，我需要弄清楚如何从这些可观测值中得到这些值，而我正在努力解决这个问题。有人有什么建议吗？我肯定我错过了一些简单的东西

我发现的大多数解决方案都建议使用flatMap或concatMap，但这最终给了我一个单个对象的可观察值，而不是包含对象的可观察数组