InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe', cannot modify HTML

Question

I am working to populate a dropdown on an application using Angular and ngrx. The app uses a dropdown component which is used across the entire application for dropdowns, so I cannot modify it.

The HTML from that component which is most important for my question is as follows:

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

I am getting my dropdown options, which is an array of objects (dateOptions), from the store. Each object has a property value (week) which I am getting and setting as the options for the dropdown.

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

Logging weekDropdownOptions in the console returns an array of the options like I was expecting, like this:

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

My HTML has the selector for the dropdown and sets [options]="weekDropdownOptions"

I can't seem to get past this error:

InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'.

It is pointing towards the dropdown component, however I can't modify the HTML. What can I do in my code to make this work?

Answer 1

the async pipe expects an Observable and not an Object. it would be interesting to see how exactly selectedValue is populated and why it's used with the async pipe.

here is an example on the difference in stackblitz https://stackblitz.com/edit/angular-vv7pzs

Answer 2

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted.

According to the error, selectedValue is an object so you can not use the async pipe.