InvalidPipeArgument：管道'AsyncPipe'的'[object Object]'，无法修改HTML

Question

我正在使用Angular和ngrx填充应用程序的下拉列表。该应用程序使用一个下拉组件，该组件在整个应用程序中用于下拉列表，因此我无法对其进行修改。

该组件中对我的问题最重要的HTML如下：

<option *ngFor="let option of options" [value]="stringifyOption(option.value)" [selected]="option.value === (selectedValue | async)">
   {{option.text}}
</option>

我从商店获取我的下拉选项，这是一个对象数组（dateOptions）。每个对象都有一个属性值（星期），我正在获取并设置为下拉列表的选项。

this.weekDropdownOptions = dateOptions.map(weekObj => weekObj.week);

在控制台中记录weekDropdownOptions返回一个像我期望的选项数组，如下所示：

["04/01 - 04/07", "04/08 - 04/14"]

我的HTML有下拉列表的选择器并设置[options]="weekDropdownOptions"

我似乎无法通过这个错误：

InvalidPipeArgument：管道'AsyncPipe'的'[object Object]'。

它指向下拉组件，但我无法修改HTML。我可以在代码中做些什么来完成这项工作？

Answer 1

异步管道订阅Observable或Promise并返回它发出的最新值。

根据错误，selectedValue是一个对象，因此您无法使用异步管道。

Answer 2

async管道需要一个Observable而不是一个Object。看看selectedValue是如何填充的，以及为什么它与async管道一起使用会很有趣。

这里有一个关于stackblitz https://stackblitz.com/edit/angular-vv7pzs差异的例子