Angular *ngFor 使用异步管道绑定到 observable - 发生了啥？

Posted 2023-02-23

【中文标题】Angular *ngFor 使用异步管道绑定到 observable - 发生了啥？

【英文标题】：Angular *ngFor bound to observable with async pipe - whats happening?Angular *ngFor 使用异步管道绑定到 observable - 发生了什么？

【发布时间】：2018-02-20 11:51:21

【问题描述】：

我刚开始使用 angular4，遇到了一个概念问题。 async 管道（在这种情况下与 *ngFor 结合使用）旨在订阅可观察对象并取消手动订阅。看看网上的例子：

案例 1：绑定到包含单个项目的 observable，例如 Observable<User>

案例 2：绑定到包含项目数组的 observable，例如 Observable<User[]>

案例 3：1 和 2 与 Subject、Promise 或 BehaviourSubject 的变化

（案例1单项示例：http://briantroncone.com/?p=623）

（案例 2 数组示例：http://www.concretepage.com/angular-2/angular-2-async-pipe-example）

从概念上讲，我知道ngFor 迭代了一个可枚举对象，并且我假设可枚举对象是从Observable 发出的项目，而不是可观察对象本身。

所以 *ngFor="let user of users" 只适用于Observable<User[]> 而不是Observable<User>？

*ngFor 在每个项目从可观察对象到达时被触发？

如果是这种情况，那么我们如何绑定到 Observable 的 Item 而不是 Item[]，当 Item 不是可枚举的时候，ngFor 如何迭代它？谢谢。

【问题讨论】：

如果您只想要一项并且列表始终相同，请在模板中使用此itemName。就像你的意思一样， *ngFor 仅适用于数组而不是项目。还要订阅 Async 的工作，因此您必须等待调用完成。 angular.io/api/common/AsyncPipe

您能否详细说明您要达到的目标？您是否正在尝试对对象的属性进行 ngFor 处理？还是别的什么？

【参考方案1】：

*ngFor="let user of users" 只适用于Observable<User[]> 而不是Observable<User>？

是的，NgFor 指令将从 iterable 中为每个项目创建一次模板。请参阅 NgFor 的 description。所以 Iterable 不是 Object。

当每个项目从 observable 到达时触发 *ngFor？

不，在使用 observable 时，NgFor 将在 observable 发出值时起作用（整个可迭代不是它的前项）。

当 Item 不可枚举时，ngFor 如何迭代它？

由于ngFor只支持Iterable，所以你可以通过Object.values或Object.keys创建一个Pipe将Object转换为Array，这样ngFor就可以迭代了。