Javascript 无法添加属性2，对象不能使用角度材质和角度12中的NgRx进行扩展

将Angular 12和NGRX与Angular material 12配合使用，但在单击菜单按钮时会出现异常

ERROR TypeError: Cannot add property 2, object is not extensible
    at Array.push (<anonymous>)
    at EventEmitter_._subscribe (Subject.js:97)
    at EventEmitter_._trySubscribe (Observable.js:42)
    at EventEmitter_._trySubscribe (Subject.js:81)
    at EventEmitter_.subscribe (Observable.js:28)
    at EventEmitter_.subscribe (core.js:25953)
    at TakeOperator.call (take.js:22)
    at AnonymousSubject.subscribe (Observable.js:23)
    at OverlayRef.attach (overlay.js:866)
    at MatMenuTrigger.openMenu (menu.js:1042)

当我点击菜单按钮时，出现上述异常

如果我删除dispatcher方法，一切正常，dispatcher方法不会出现上述异常

这是回购代码

---

我发现了一个类似的问题

我认为您正在将整个表单分配到一个redux状态变量中。redux状态是不可变的，而将其分配给form对象的ref意味着每次表单更改时，它都会改变状态。尝试将其分配给Object.assign（{}，this.form）并查看是否存在错误disappears@quirimmo我尝试了this.adminProductState.productDetailformValidStatus=Object.assign（{}，this.form）；但同样的问题啊，但是：你不需要采取行动来改变这个州的某些事情吗？看起来您直接将其指定为法线var@quirimmo我这里有一个动作和减速器。你可以通过@Qurimmo检查回购代码是的，你是正确的，因为我正在分配整个表单，这就是为什么会出现异常。但是我需要在表单成功创建后传递formValue以验证表单状态

<button mat-button [matMenuTriggerFor]="theMenu"> Click for menu </button>
<mat-menu #theMenu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
  <button mat-menu-item>Item 3</button>
</mat-menu>

<br>
<div fxLayout="row" fxLayoutAlign="center center">
  <mat-card style="width: 40rem;">
    <mat-card-content>
      <form [formGroup]="form">
        <reactive-controls [fields]="controlsConfig" [formGroup]="form"></reactive-controls>
      </form>
    </mat-card-content>
  </mat-card>
</div>

  ngOnInit(): void {
    this.createControlAsyncTask()
      .then(() => this.store.dispatch(Product_Form_Validation(this.adminProductState)));
  }

  createControlAsyncTask() {
    return new Promise((resolve, reject) => {
      this.form = this.createControls();
      this.adminProductState.productDetailformValidStatus = this.form;
      resolve('done');
    });
  }