CODEWITHSUNDEEP
angularasynchronousrxjsobservablengrx
FussinHussin
FussinHussin

Reputation: 1814

ERROR: InvalidPipeArgument: '[object Object]' ngrx async pipe

My main app component dispatches an action that gets the data from the API and loads it into the store in property config, then when the page loads, my form component selects config from the store, and binds it to the child component that then displays it with the async pipe. Other posts I looked at said the problem is that the value is not an observable, but I know mine is, because I have subscribed to it, and can log the array of objects. I just can't get it to go through the async pipe.

the data object from config is an array of satOptions SatOption[]

export interface SatOption {
    satelliteId: number;
    satelliteName: string;
    channels: Channel[];
}

parent ngOnInit

this.config$ = this.store.select((state:any) => state.appReducer.config)
this.config$.subscribe(slice => console.log(slice))

child template

<select [formControl]="satControl">
    <option
        class="hide-select"
        value="default"
        disabled
    >
        pick a satellite
    </option>
    <option
        *ngFor="let sat of (config$ | async)"
        [value]="sat.channels"
        [attr.set]="sat"
    >
        {{ sat.satelliteName }}
    </option>
</select>

my console.log:

Array(3) [ {…}, {…}, {…} ]

the attr.set binding shows [object Object]

I'm really at a loss, I have tried subscribing and re-assigning and get the same result. What am I doing wrong?

Upvotes: 1

Views: 653

Answers (1)

timdeschryver
timdeschryver

Reputation: 15505

Without knowing the full code, I would assume that you're passing an array (and not an Observable array) to your child template, this would mean you don't need to use the async pipe anymore.

Parent:

<my-child [items]="items | async"></my-child>

Child:

<li *ngFor="let item of items">{{ item.name }}</li>

Upvotes: 1

Related Questions