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管道一起使用会很有趣。

这是一个关于堆栈闪电https://stackblitz.com/edit/angular-vv7pzs

的区别的示例

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

2 个答案: