Trouble switching observable data between inherited components

Question

I have base component and two inherited components. Each of components takes data from own service which is projected to state. If I try to use the following approach - data is not switched correctly:

get codeData$(): Observable<Codes.Code[]> {
    return this.store.select(Codes.Type.Fix ? FixCodesState.getCodes : FreeCodesState.getCodes);
}

[value]="сodeData$ | async"

But this ugly solution works:

@Select(FixCodesState.getCodes)
fixCodeData$: Observable<Codes.Code[]>

@Select(FreeCodesState.getCodes)
freeCodeData$: Observable<Codes.Code[]>

[value]="(isFixCode ? fixCodeData$ : freeCodeData$) | async"

Why?

I also tried to use this:

getCodes: typeof GetFreeCodes | typeof GetFixCodes;

this.getCodes = this.codeType === Codes.Type.Fix ? GetFixCodes : GetFreeCodes;

this.store.dispatch(new this.getCodes(this.codePageQuery))

instead of this:

this.store
  .dispatch(
    this.codeType === Codes.Type.Fix
    ? new GetFixCodes(this.codePageQuery)
    : new GetFreeCodes(this.codePageQuery)
  )

And not sure it it would work properly as well (but first issue is 100% true)

Answer 1

You could try to use the RxJS iif function for the first issue

get codeData$(): Observable<Codes.Code[]> {
  return iif(
    () => Codes.Type.Fix,
    this.store.select(FixCodesState.getCodes),
    this.store.select(FreeCodesState.getCodes)
  );
}

[value]="сodeData$ | async"