javascript - InvalidPipeArgument : '[object Object]' for pipe 'AsyncPipe' , 无法修改 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: '[object Object]' for pipe 'AsyncPipe'.

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

Answer 1

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

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