NGRX 商店。无法分配给对象“[object Array]”的只读属性“18”

Question

当我尝试创建 ngrx 存储时，我遇到了 7 个错误。

TypeError：无法分配给对象“[object Array]”的只读属性“18”| TypeError：无法分配给对象“[object Object]”的只读属性 'incompleteFirstPass' |类型错误：无法读取未定义的属性（读取 'value'）

reducer.ts

import { createReducer, on } from '@ngrx/store';
import { Fields } from '../fields.model';

import { addAllFields } from './fields.action';

export const initialState: Readonly<Fields> = {
  arrStart: [],
  arrEnd: [],
};

export const fieldsReducer = createReducer(
  initialState,
  on(addAllFields, (state, { extArr }) => {
    return { ...state, arrStart: extArr };
  })
);

actions.ts

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

export const addAllFields = createAction(
  '[Fields Array]Add fields to starting array',
  props<{ extArr: TemplateRef<any>[] }>()
);

fields.model.ts

import { TemplateRef } from '@angular/core';

export interface Fields {
  arrStart: TemplateRef<any>[] | null;
  arrEnd: TemplateRef<any>[] | null;
}

我知道状态必须是不可变的，因此，我 return 我当前状态的副本。

我的组件中有调度，肯定有问题。 console.log(fieldsArr) returns 2 TemplateRef

constructor(private store: Store) {}

  ngOnInit(): void {}

  ngAfterViewInit() {
    const fieldsArr: TemplateRef<any>[] = [this.inputField, this.textareaField];
    console.log(fieldsArr);

    this.store.dispatch(addAllFields({ extArr: fieldsArr }));
  }

Answer 1

问题可能出在TemplateRef，因为这些是发货到店里的，这些会被冻结。我不是 100% 确定，但我的猜测是 Angular 在更改检测时改变了 TemplateRef。因为这与商店冻结的实例是同一个实例，所以会抛出此错误。

NGRX 商店。无法分配给对象“[object Array]”的只读属性“18”

NGRX Store. Cannot assign to read only property '18' of object '[object Array]'

javascript

angular

typescript

frontend

ngrx

NGRX 商店。无法分配给对象“[object Array]”的只读 属性“18”

NGRX Store. Cannot assign to read only property '18' of object '[object Array]'

javascript

angular

typescript

frontend

ngrx

NGRX 商店。无法分配给对象“[object Array]”的只读属性“18”