Angular Ngrx -如何让不同的调用循环一个数组？

Angular Ngrx是一个基于Angular框架和RxJS的状态管理库。它提供了一种可预测、可扩展的方式来管理应用程序的状态，并通过单向数据流的方式使得状态的变化更加可控。在应用中使用Angular Ngrx可以将状态与组件解耦，简化应用的复杂性并提高可维护性。

关于如何让不同的调用循环一个数组，可以通过以下步骤实现：

创建一个基于ngrx/store的状态管理模块，用于存储和管理需要共享的数据。可以使用@ngrx/store提供的createReducer函数来创建reducer函数，使用createAction函数来创建action对象。
在状态管理模块中定义一个数组类型的状态，用于存储需要循环的数据。
创建一个action，用于触发数组循环的操作。可以使用createAction函数创建一个包含payload的action。
在reducer函数中处理这个action，更新数组的状态。可以使用ngrx/store提供的withLatestFrom操作符来获取当前状态，并根据需要更新数组。
在需要循环数组的组件中，使用ngrx/store提供的select函数来选择数组的状态，并订阅状态的变化。
在订阅状态的回调函数中，使用RxJS的管道操作符（pipe）对数组进行循环操作。
在组件的模板中，使用Angular的*ngFor指令来展示循环后的数组数据。

下面是一个示例代码：

创建状态管理模块（例如：app.state.ts）：

import { createAction, createReducer, on } from '@ngrx/store';

export interface AppState {
  data: any[];
}

export const initialState: AppState = {
  data: []
};

export const loopArray = createAction('[Array] Loop');

export const appReducer = createReducer(
  initialState,
  on(loopArray, state => {
    const newData = state.data.map(item => {
      // 在这里对数组进行循环操作
      return item;
    });
    return { ...state, data: newData };
  })
);

在应用的模块文件中引入状态管理模块并配置Store：

import { StoreModule } from '@ngrx/store';
import { appReducer } from './app.state';

@NgModule({
  imports: [
    StoreModule.forRoot({ app: appReducer }),
    // 其他模块配置
  ],
  // ...
})
export class AppModule { }

在组件中使用ngrx/store来循环数组：

import { Component, OnInit } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { loopArray } from './app.state';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-my-component',
  template: `
    <ul>
      <li *ngFor="let item of data$ | async">{{ item }}</li>
    </ul>
    <button (click)="loop()">循环数组</button>
  `
})
export class MyComponent implements OnInit {
  data$: Observable<any[]>;

  constructor(private store: Store<{ app: AppState }>) { }

  ngOnInit() {
    this.data$ = this.store.pipe(select(state => state.app.data));
  }

  loop() {
    this.store.dispatch(loopArray());
  }
}

通过以上步骤，我们可以实现在组件中通过ngrx/store循环一个数组，并随着循环操作的触发动态更新视图。

腾讯云相关产品和产品介绍链接地址：