Angular SignalStore -> 2 个数组

Question

我有一个包含 2 个数组和 2 个 API 调用的 SignalStore。我可以将 2 个数组合并为 1 个数组并获取数据吗？这样我就可以使用PVVormat.[0]。和 PVVormonat。[1]来自 2 个 API 调用的数据？

export const AktuellerMonatStore = signalStore(
  withState(monatGesamt),
  withRequestStatus(),
  withMethods((store, dbService = inject(DBService)) => ({
    loadDaten: rxMethod<void>(
      pipe(
        switchMap(() => {
          patchState(store, setPending());
          return dbService.getMonatGesamt('' + aktJahr + '', '' + monat + '').pipe(
            tapResponse({
              next: (pvVorjahr) =>
                patchState(store, { pvVorjahr }, setFulFilled()),
              error: (error: {message:string}) => {
                patchState(store, setError(error.message));
              }
            })
          )
        })
      )
    ),
    loadDatenVorjahr: rxMethod<void>(
      pipe(
        switchMap(() => {
          patchState(store, setPending());
          return dbService.getMonatGesamt('' + aktJahr + '', '' + monat + '').pipe(
            tapResponse({
              next: (pvVormonat) =>
                patchState(store, { pvVormonat }, setFulFilled()),
              error: (error: {message:string}) => {
                patchState(store, setError(error.message));
              }
            })
          )
        })
      )
    )
  }))

谢谢

Answer 1

您应该创建一个包含实体的商店，请参阅 Medium 上的这篇文章

您的商店应如下所示：

export interface IItem {
    id: number, 
    name: string
}


export const ItemsStore = signalStore(
        // {providedIn: 'root'},
        withState({isLoading: false}),
        withEntities({entity: type<IItem>(), collection: 'collection1'}),
        withEntities({entity: type<IItem>(), collection: 'collection2'}),

        withComputed((store) => ({
            getCollection1AndCollection2: computed(() => {
                return [...store.collection1Entities(), ...store.collection2Entities()];
            }),
        })),
        withMethods((store, dataService = inject(DataService)) => ({
            getCollection1: rxMethod<void>(
                pipe(
                    tap(() => patchState(store, {isLoading: true})),
                    switchMap( () => {
                        return dataService.getCollection1FromServer().pipe(
                            tapResponse({
                                next: (items: IItem[]) => {
                                    patchState(store, setEntities(items, {collection: 'collection1'}))
                                },
                                error: console.error,
                                finalize: () => patchState(store, {isLoading: false}),
                            })
                        )
                    })
                )
            ),
            getCollection2: rxMethod<void>(
                pipe(
                    tap(() => patchState(store, {isLoading: true})),
                    switchMap(book => {
                        return dataService.getCollection2FromServer().pipe(
                            tapResponse({
                                next: (items: IItem[]) => {
                                    patchState(store, setEntities(items, {collection: 'collection2'}))
                                },
                                error: console.error,
                                finalize: () => patchState(store, {isLoading: false}),
                            })
                        )
                    })
                )
            ),
        }))
    );

然后您可以在组件或其他任何地方使用它：

@Component(...)
export class AComponent {
   private itemsStore = inject(ItemsStore);

   listOfAllItems: Item[] = this.itemsStore.getCollection1AndCollection2();
}