javascript - @ngrx 从数组中返回一个带有 .single 的对象

Question

我想返回一个对象的 Observable，该对象是从我的商店中的一组对象中选择的。我想使用 .single 运算符，因为如果存在少于或多于 1 个对象，这会引发异常。但我无法让它工作，因为我的商店返回一个数组而不是一个可观察的。我知道我可以在数组上使用 .filter ，但我想了解为什么我无法让它工作。我什至尝试使用选择器。

我的应用程序 reducer 有:

export interface AppState {
  batStores: fromBatStores.State;
}

export const reducers: ActionReducerMap<AppState> = {
  batStores: fromBatStores.batStoresReducer,
};

我的模块的 reducer :

export interface State {
  batStores: BatStore[];
}

const initialState = {
  batStores: [
    new BatStore(0, 0, true, 'Cell 11', 11, 11),
    new BatStore(1, 0, false, 'Cel 12', 12, 11),
    new BatStore(2, 0, true, 'Cel 13', 13, 11),
    new BatStore(2, 0, true, 'Cel 14', 14, 11),
  ]
};

export const selectBatStores = (state: fromApp.AppState) => state.batStores;
export const selectBatStoresBatStores = createSelector(selectBatStores, (state: State) => state.batStores);

现在我在 ngOnInit 中尝试这样的事情:

ngOnInit() {
  const editId = 11;
  const batStore$: Observable<BatStore> = this.store.select(fromBatStores.selectBatStoresBatStores)
    .single(bs => bs.number === editId);

  this.batStore$ = batStore$;
}

PhpStorm 表示 BatStore[] 上不存在 number 属性。我不明白，因为在 example documentation single 也用作可观察数组的运算符。

更新

看完答案，还是很困惑。为了测试，我这样编写了我的函数:

getBatStore(id: number) {
  const versionA$ = this.store.select(fromBatStores.selectBatStoresBatStores)
    .switchMap((batStores: BatStore[]) => Observable.from(batStores))
    .filter((bs: BatStore) => {
      console.log('Analyzing ', bs);
      console.log('Result ', bs.number === id);
      return bs.number === id;
    });

  const versionB$ = this.store.select(fromBatStores.selectBatStoresBatStores)
    .switchMap((batStores: BatStore[]) => Observable.from(batStores))
    .single((bs: BatStore) => {
      console.log('Analyzing ', bs);
      console.log('Result ', bs.number === id);
      return bs.number === id;
    });

  console.log('VersionA: ', versionA$);
  console.log('VersionB: ', versionB$);

  console.log('Same? ', versionA$ === versionB$);

  return versionB$;
}

两个版本都向控制台输出相同的内容。在我看来，版本 A 在与异步管道一起使用时可以工作，而版本 B 则不能。代码可以编译并且 PhpStorm 不会提示。

Answer 1

选择正在获取对整个数组的引用，因此其上不存在 number 属性。尝试使用 switchMap 切换到一个新的可观察对象，该可观察对象会扩展列表，以便一次可以选择一个，如下所示:

const batStore$: Observable<BatStore> = this.store.select(fromBatStores.selectBatStoresBatStores)
    .switchMap((batStores : BatStore[]) => Observable.from(batStores))
    .single((bs: BatStore) => bs.number === editId);