如何使用ngFor在angular中获取和显示ngrx存储数据

export interface AppState {
  data: any[];
}

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

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

export const setData = createAction('[Data] Set Data', props<{ data: any[] }>());

import { createReducer, on } from '@ngrx/store';
import { setData } from './actions';
import { initialState } from './state';

export const dataReducer = createReducer(
  initialState,
  on(setData, (state, { data }) => ({ ...state, data }))
);

import { StoreModule } from '@ngrx/store';
import { dataReducer } from './reducers';

@NgModule({
  imports: [
    StoreModule.forRoot({ app: dataReducer })
  ]
})
export class AppModule { }

import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { setData } from './actions';

@Component({
  selector: 'app-data',
  template: `
    <ul>
      <li *ngFor="let item of data$ | async">{{ item }}</li>
    </ul>
    <button (click)="setData()">Set Data</button>
  `
})
export class DataComponent {
  data$ = this.store.pipe(select(state => state.app.data));

  constructor(private store: Store) {}

  setData() {
    const data = [1, 2, 3]; // 从某个地方获取你的数据
    this.store.dispatch(setData({ data }));
  }
}