Question

如果我的初始状态是

export const initialState: State = {
  release: '',
  shape: '',
  story: '',
  keyFeatures: [''],
  colors: []
};

export function reducer(state = initialState, action): State {
    switch(action.type) {
        case "UPDATE_PRODUCT": return Object.assign({}, action.payload || state);
        case "UPDATE_COLOR": 
            return Object.assign({}, state, {currentColor: action.payload.currentColor, imagePaths: action.payload.imagePaths})
        default:
            return state;
    }
}

并且组件正在消耗像这样的状态

<img class="glassesImg" [images]="paths | async" >

_store.select('product')
      .subscribe((product: State) => {
        this.collection = product.collection;
        this.release = product.release;
        this.sku = product.sku;
        this.paths = product.imagePaths;
    })

我收到了错误＆＃34;无效的参数＆＃39;＆＃39; for pipe＆＃39; AsyncPipe＆＃39;＆＃34;当没有任何可用数据时。我希望AsyncPipe可以订阅＆＃39;＆＃39;＆＃39;＆＃39;作为该属性的有效字符串值？我错过了什么？

Answer 1

为什么需要具有正常同步值的async管道？ async需要与Observable或Promise一起使用，但paths只是普通值类型。

如果您想使用async，可以执行类似

的操作

<something [blah]="(model$ | async)?.someProperty">

class Component {
  model$
  ...
  this.model$ = store.select(..)
}

或者只是不要使用async并使用默认值初始化您的组件属性，直到第一个值来自商店。

angular 2 ngrx / store不可用数据中断异步管道

1 个答案: