如何使用ngrx状态管理编辑表单数据?出现错误(尝试比较'[object Object]‘时出错。只允许数组和迭代器“)

npm install @ngrx/store

// app.state.ts
import { createAction, createReducer, on, props } from '@ngrx/store';

export interface AppState {
  formData: any;
}

export const initialState: AppState = {
  formData: null
};

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

export const formReducer = createReducer(
  initialState,
  on(setFormData, (state, { data }) => ({ ...state, formData: data }))
);

// form.component.ts
import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { setFormData } from './app.state';

@Component({
  selector: 'app-form',
  template: `
    <form (ngSubmit)="onSubmit()">
      <input [(ngModel)]="formData.name" name="name" placeholder="Name">
      <input [(ngModel)]="formData.email" name="email" placeholder="Email">
      <button type="submit">Submit</button>
    </form>
  `
})
export class FormComponent {
  formData: any;

  constructor(private store: Store) {
    this.store.pipe(select('formData')).subscribe(data => {
      this.formData = data;
    });
  }

  onSubmit() {
    this.store.dispatch(setFormData({ data: this.formData }));
  }
}

// app.module.ts
import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { formReducer } from './app.state';
import { FormComponent } from './form.component';

@NgModule({
  imports: [
    StoreModule.forRoot({ formData: formReducer })
  ],
  declarations: [FormComponent],
  bootstrap: [FormComponent]
})
export class AppModule { }