ОШИБКА: InvalidPipeArgument: '[объект объекта]' ngrx асинхронный канал

Question

Мой основной компонент приложения отправляет действие, которое получает данные из API и загружает их в хранилище в свойстве config, затем при загрузке страницы мой компонент формы выбирает конфигурацию из хранилища и привязывает ее к дочернему элементу.компонент, который затем отображает его с async pipe.В других постах, на которые я смотрел, говорилось, что проблема в том, что значение не является наблюдаемым, но я знаю, что оно есть, потому что я подписался на него и могу регистрировать массив объектов.Я просто не могу заставить его пройти через асинхронный канал.

объект данных из конфигурации представляет собой массив 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))

дочерний шаблон

<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) [ {…}, {…}, {…} ]

привязка attr.set показывает [object Object]

Я действительно в растерянностиЯ попытался подписаться и переназначить и получить тот же результат.Что я делаю не так?

Answer 1

Не зная полного кода, я бы предположил, что вы передаете массив (а не массив Observable) вашему дочернему шаблону, это будет означать, что вам больше не нужно использовать async канал.

Родитель:

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

Ребенок:

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