ngrx中的可观察数组为空

// state.ts
export interface YourState {
  items: any[];
}

export const initialState: YourState = {
  items: []
};

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

export const addItem = createAction(
  '[Your Feature] Add Item',
  props<{ item: any }>()
);

// reducer.ts
import { createReducer, on } from '@ngrx/store';
import * as YourActions from './actions';

export function yourReducer(state = initialState, action: YourActions.Actions) {
  switch (action.type) {
    case YourActions.addItem:
      return {
        ...state,
        items: [...state.items, action.payload.item]
      };
    default:
      return state;
  }
}

// your.component.ts
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import * as YourActions from './actions';

@Component({
  selector: 'app-your',
  template: `
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
    <button (click)="addItem()">Add Item</button>
  `
})
export class YourComponent implements OnInit {
  items: any[];

  constructor(private store: Store<{ yourReducer: YourState }>) {}

  ngOnInit() {
    this.store.select(state => state.yourReducer.items).subscribe(items => {
      this.items = items;
    });
  }

  addItem() {
    const newItem = { id: Date.now(), name: 'New Item' };
    this.store.dispatch(YourActions.addItem({ item: newItem }));
  }
}