Angular SignalStore：如何合并两个API返回的数组并按索引访问？

现有一个Angular SignalStore，包含两个数组状态与两个API调用，能否将这两个数组合并为一个数组，通过合并数组[0]、合并数组[1]的方式访问两个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));
              }
            })
          )
        })
      )
    )
  }))

完全可以实现，只需调整状态结构和API回调的状态更新逻辑，具体步骤如下：

1. 修改初始状态结构
   将原来的两个独立数组状态（pvVorjahr、pvVormonat）替换为一个数组状态，比如命名为mergedData，初始值设为空数组：

// 替换原monatGesamt结构，假设原结构包含两个数组字段
const monatGesamt = {
  mergedData: [] as YourDataType[][] // 将YourDataType替换为实际数据类型
};

2. 更新方法中的状态逻辑
   在两个rxMethod的next回调里，不再单独更新两个状态字段，而是根据索引更新mergedData数组的对应位置，注意保持数组的不可变性：

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: (data) => {
                // 更新mergedData的第0位，保留已有数据
                patchState(store, {
                  mergedData: [data, ...store.mergedData().slice(1)]
                }, 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: (data) => {
                // 更新mergedData的第1位，保留已有数据
                const currentData = store.mergedData();
                patchState(store, {
                  mergedData: [currentData[0] || [], data]
                }, setFulFilled());
              },
              error: (error: {"message":string}) => {
                patchState(store, setError(error.message));
              }
            })
          )
        })
      )
    )
  }))

3. 访问合并后的数据
   之后就可以通过索引直接访问对应API返回的数据：

// 获取第一个API（loadDaten）返回的数据
const firstApiData = store.mergedData()[0];
// 获取第二个API（loadDatenVorjahr）返回的数据
const secondApiData = store.mergedData()[1];

内容的提问来源于stack exchange，提问作者StoRm Tec