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>

在这里，我得到了一个Observable数组，管道似乎无法正常工作

ERROR错误：InvalidPipeArgument：'[object Object]，[object 对象]，[对象对象]'用于管道“ AsyncPipe”

然后我尝试了另一种方法，并从操作符切换到（这样我可以得到一个可观察的对象）：

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

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

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

Answer 1

您正在做的是将可观察对象列表传递到async管道，但是异步管道希望仅获取可观察对象和承诺。因此，您需要做的是使用 RxJS 提供的组合函数之一（{{1}，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

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

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

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

具有Observables的异步管道

1 个答案: