不清楚为什么在Angular“异步”管道中需要“as”答案

【问题标题】：Unclear on why "as" is necessary in Angular "async" pipe不清楚为什么在Angular“异步”管道中需要“as”
【发布时间】：2020-04-18 04:33:30
【问题描述】：

我的 HTML 中有以下标记。它按预期工作并按预期执行。

<ng-container *ngIf="stuff$ | async as data">
  <div *ngFor="let element of data">{{element.name}}</div>
</ng-container>

我开始篡改它，看看我可以阻止/改进什么，假设 as data 只为订阅的结果分配一个变量名（由于 async 管道），我希望我可以直接重用 data$，而无需处理额外的变量。所以我改成了这个。

<ng-container *ngIf="stuff$ | async">
  <div *ngFor="let element of stuff$">{{element.name}}</div>
</ng-container>

这非常失败，产生了下面的错误。

错误错误：找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

虽然我理解错误的含义，但我不知道它来自哪里。我订阅的服务返回一个可观察的数组。被异步'ed 的属性的as'ing 是强制性的吗？我敢肯定，当我在异步管道上阅读时，我错过了一件微妙的小事，但我没有看到它。

stuff$: Observable<Thing[]>;
ngOnInit() { ...
  this.stuff$ = this.stuffy.getStuff();
}

【问题讨论】：

你为什么认为会起作用？您实际上是用对其参数的引用替换了对函数返回值的引用，它们甚至可能不是同一类型。
@jonrsharpe 我无法为这种特殊情况提供动力。然而，在我 20 年的编程生涯中，我一直处于一种我不认为某些东西会起作用的情况，但它确实起作用了。无数次。以可以想象的最奇怪的方式（至少对我来说）。所以，虽然我实际上并不认为这一次会奏效，但统计数据告诉我，我可能又错了。有意义吗？
在一定程度上，但在没有理由认为它会起作用并且给出明确的反馈说它确实不起作用的情况下，我不清楚你为什么会留下一个问题。跨度>
@jonrsharpe 我知道你来自哪里。我想这纯粹是谦虚。 很可能产生错误消息的方法实际上是正确的但隐藏在另一个模糊的错误后面。这是一个很长的镜头，但如果你想象我不像其他人那么聪明，那么它不仅需要确定它不起作用，而且还需要解释为什么它不起作用。我太无知了，无法做到这一点。相信我，如果我能够充分可靠地解释观察到的现象的复杂细节，我不会浪费我的时间（也不会浪费其他人的时间）。 :)
@jonrsharpe 我认为其中一个 cmets 刚刚证明了我的观点。我自己太笨了，无法自己弄清楚以下语法：let item of stuff$ |异步。但这是我试图实现的方法（省略中间 stuff 声明以从中选择 item 元素）。我为自己的口才不够道歉。

标签： angular typescript asynchronous pipe

【解决方案1】：

你可以这样做：

<div *ngFor="let element of stuff$ | async">{{element.name}}</div>

ngFor 就是为此而设计的。

【讨论】：

我现在分手了。一方面，@EliasSoares 确实回答了这个问题。他这样做是正确和可掌握的。另一方面，您弄清楚了我的回避问题是什么，建议对我的问题（实际问题）进行务实的重新处理。所以他的回答是正确的。你的很有用。我不能决定我应该把我的绿色检查放在哪个上面。你怎么看？
对我来说没关系。仍然存在不直接在 ngFor 中使用 async 并且仍然使用“as”的情况，例如，如果列表为空，则需要不同的显示。

【解决方案2】：

这很简单：stuff$ 包含一个 observavle。当您使用async 管道时，在幕后 angular 订阅 observable 并返回它的值以在模板上使用。

当您使用as data 时，它会将stuff$ | async 的结果保存到data 变量中，让您无需多次使用async 管道即可使用它。

您的第二个代码失败，因为您无法迭代 Observable，因为它是一个对象。

【讨论】：

那么，让我了解订阅结果的唯一方法是as 将它变成某种东西？如果是这样，当我们不需要as但可以使用管道时，是否有任何情况，无论它可能多么奇怪，嗯... as '少？
可以，但效率会降低。
@KonradViltersten 有很多情况下使用不带“as”的异步管道，即在 ngFor 中，结果是您的可迭代：*ngFor="let item of items$ | async" 或输入绑定：[input]="observable$ | async"真的在寻找真假：*ngIf="show$ | async"
@bryan60 哦，哦，哦，那里来了！我刚拿到蛋糕里的葡萄干。我的目标是您的第一个示例 - 让迭代从 async 的 observable 中分配元素。由于思考时没有成功，我只是没有想到那个语法，哈哈。谢谢！