Rxjs 可观测的异步管道

尝试模拟HTTP请求，并使用异步管道呈现静态数据

ts:

footerContent$：可观察[]=([
of（{key:'1'，value:'a'}），
of（{key:'2'，value:'b'}），
of（{键：'3'，值：'c'}）
])

HTML:

{{content.value}

在这里，我得到了一系列的可观测数据，而管道似乎不起作用

错误：InvalidPipeArgument:'[object]，[object] 管道“AsyncPipe”的对象“，[Object]”

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

footerContent$：可观察=来自([
（{key:'1'，value:'a'}），
（{键：'2'，值：'b'}），
（{键：'3'，值：'c'}）
])

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

---

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

您所做的是将一个可观察的列表传递给

async

管道，但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' })
)

请注意，

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

---

以下是有关的详细信息的链接。

异步管道用于直接从模板订阅可观察的。在第一个示例中，您处理的是一个数组，而不是一个可观察的数组。在第二个示例中，Observable发射多个对象，而不是一个数组，因此使用

ngFor

在那里不起作用。我不知道你到底想干什么。在第一个示例中，您可以使用

forkJoin

包装观察值数组，在第二个示例中，您可以使用

of

而不是

from

。

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

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

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