错误:InvalidPipeArgument:'[object Object]'ngrx异步管道

时间:2018-08-24 19:37:28

标签: angular asynchronous rxjs observable ngrx

我的主要应用程序组件调度一个操作,该操作从API获取数据并将其加载到属性config中的存储中,然后在页面加载时,我的表单组件从存储中选择配置,并将其绑定到然后使用async pipe显示它的子组件。我看过的其他帖子说,问题在于该值不是可观察的,但是我知道我的是,因为我已经订阅了它,并且可以记录对象数组。我只是无法让它通过异步管道。

config中的数据对象是satOptions SatOption[]

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

父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>

我的console.log:

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

attr.set绑定显示[object Object]

我真的很茫然,我尝试了订阅和重新分配并获得了相同的结果。我在做什么错了?

1 个答案:

答案 0 :(得分:1)

在不知道完整代码的情况下,我假设您正在将数组(而不是Observable数组)传递给子模板,这意味着您不再需要使用async管道。

父母:

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

孩子:

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