带有 Observables 的异步管道

Question

尝试模仿 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 数组，但管道似乎不起作用

ERROR Error: InvalidPipeArgument: '[object Object],[object Object],[object Object]' for pipe 'AsyncPipe'

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

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

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoChec

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

Answer 1

您正在做的是将可观察对象列表传递给 async 管道，但异步管道期望仅获得可观察对象和承诺。因此，您需要做的是使用 RxJS 提供的一种组合函数（merge、zip、forkJoin, 等等).

查看使用 forkJoin 的可观察对象组合示例。在此示例中，组合的可观察对象将在所有可观察对象完成时发出：

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

在您订阅这个组合的可观察对象后，发出的值将如下所示：

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

注意 forkJoin 可以得到一个 observables 的地图：

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' }
}

这里是 link 以了解有关 combination functions of RxJS 的更多详细信息。

带有 Observables 的异步管道

Async pipe with Observables

rxjs

angular7