带有 Observables 的异步管道答案

【问题标题】：Async pipe with Observables带有 Observables 的异步管道
【发布时间】：2019-12-14 19:59:16
【问题描述】：

试图模仿 HTTP 请求，并制作一个静态数据以通过异步管道呈现。

ts：

footerContent$: Observable<{ key: string, value: string }>[] = ([
    of({ key: '1', value: 'a' }),
    of({ key: '2', value: 'b' }),
    of({ key: '3', value: 'c' })
])

HTML：

<div *ngFor='let content of footerContent$ | async'>
    {{content.value}}
</div>

这里我得到了一个 Observables 数组，但管道似乎不起作用

错误错误: InvalidPipeArgument: '[object Object],[object Object],[object Object]' 用于管道 'AsyncPipe'

然后我尝试了另一种方法并切换到 from 运算符（这样我就可以获得一个可观察的对象）：

footerContent$: Observable<{ key: string, value: string }> = from([
    ({ key: '1', value: 'a' }),
    ({ key: '2', value: 'b' }),
    ({ key: '3', value: 'c' })
])

错误错误：找不到不同的支持对象“[object Object]” '对象'类型。 NgFor 仅支持绑定到 Iterables，例如数组。在 NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoChec

有什么建议为什么它不起作用？

【问题讨论】：

async pipe 用于直接从模板订阅 Observable。在您的第一个示例中，您正在处理一个数组而不是 Observable。在您的第二个示例中，您的 Observable 发出多个对象而不是数组，因此使用 ngFor 在那里不起作用。我不确定你到底想做什么。在您的第一个示例中，您可以使用 forkJoin 包装 Observables 数组，在您的第二个示例中，您可以使用 of 而不是 from。

标签： rxjs angular7

【解决方案1】：

您正在做的是将一个可观察对象列表传递给async 管道，但异步管道希望只获得可观察对象和承诺。因此，您需要做的是使用 RxJS 提供的组合函数之一（merge、zip、forkJoin 等）将您的 observable 列表转换为一个组合 observable。

查看使用 forkJoin 的 observables 组合示例。在这个例子中，组合的 observable 将在所有 observable 完成时发出：

footerContent$: Observable<SomeObject[]> = forkJoin(
  of({ key: '1', value: 'a' }),
  of({ key: '2', value: 'b' }),
  of({ key: '3', value: 'c' })
)

订阅这个组合的 observable 后，发出的值将如下所示：

[
  { key: '1', value: 'a' },
  { key: '2', value: 'b' },
  { key: '3', value: 'c' }
]

注意forkJoin 可以获得可观察的地图：

footerContent$: Observable<{[key: string]: SomeObject}> = forkJoin({
  request1: of({ key: '1', value: 'a' }),
  request2: of({ key: '2', value: 'b' }),
  request3: of({ key: '3', value: 'c' })
})

在这种情况下，发出的值将如下所示：

{
  request1: { key: '1', value: 'a' },
  request2: { key: '2', value: 'b' },
  request3: { key: '3', value: 'c' }
}

这里是有关combination functions of RxJS的更多详细信息的链接。

【讨论】：