无法添加属性 X，ngrx 9 更新后对象不可扩展

Question

我有这样的问题

无法添加属性 X，对象不可扩展

在使用 Ngrx 更新将我的 angular 项目更新为 angular 9 之后。当我将 Ngrxversion 回滚到 8 时，它工作正常。但是我还需要使用 angular 9 更新将其更新到 v9。当我将其作为 datasource.data 添加到具有附加属性的材料表中时，就会发生这种情况。我认为额外的属性改变是一个原因。但是我通过使用切片从我们得到并尝试的内容创建了新数组，如下所示。

 myDataArray.slice(0)

它也不起作用。

我在这里参考了 Ngrx 版本 8 到 9 的更改列表和迁移指南https://ngrx.io/guide/migration/v9

我发现有一个与 angular 9 的不变性相关的特殊变化。他们在那里定义了动作、状态和可序列化相关的不变性逻辑。我尝试了他们建议的解决 Ngrx V9 更新问题的方法https://ngrx.io/guide/store/configuration/runtime-checks

但这些对我不起作用。如果有人对此问题有解决方案，这真的很有帮助。提前致谢..

错误堆栈跟踪..（我也使用了 matDataFlatner 这就是对象突变发生的地方）

app-error-handler.ts:30 TypeError：无法添加属性级别，对象不可扩展在 MatTreeFlattener.defaultFlattenerTransform [as transformFunction] (tree-table-flattener-builder.ts:57) at MatTreeFlattener._flattenNode (flat-data- source.ts:58) at flat-data-source.ts:81 at Array.forEach () at MatTreeFlattener._flattenChildren (flat-data-source.ts:78) at MatTreeFlattener._flattenNode (flat-data-source.ts: 65) at flat-data-source.ts:92 at Array.forEach () at MatTreeFlattener.flattenNodes (flat-data-source.ts:92) at MatTreeFlatDataSource.set (flat-data-source.ts:138)

Answer 1

你应该深度克隆，myDataArray因为它是通过选择器从商店中出来的。保持存储中数据的不变性是 redux 模式的重要组成部分，如果您修改，您将直接在存储中更改数据myDataArray（取决于您的选择器，它可能是相同的数据 => 对数组的引用在商店）。

您可以myDataArray = JSON.parse(JSON.stringify(myDataArray))在尝试对其进行任何更改之前执行此操作。

有更有效的深度克隆对象的方法，例如使用fast-copy：

import copy from 'fast-copy';

...

myDataArray = copy(myDataArray);

Answer 2

您可以使用 lodash 库中的 cloneDeep 函数来深度克隆对象并避免错误：

import {cloneDeep} from 'lodash';

const clonedData = cloneDeep(myDataArray);

然后，您可以添加属性或所有您想要克隆的数据对象。

问候！

Answer 3

我在这里参考 Ngrx 版本 8 到 9 的更改列表和迁移指南

https://ngrx.io/guide/migration/v9

我发现 Angular 9 有一个与不变性相关的特殊变化。他们在那里定义了与不变性逻辑相关的操作、状态和可序列化性。我尝试了他们建议的方法来解决 Ngrx V9 更新的这些问题

https://ngrx.io/guide/store/configuration/runtime-checks

您可以进行以下更改，

@NgModule({
  imports: [
  StoreModule.forRoot(reducers, {
    runtimeChecks: {
      strictStateImmutability: false,
      strictActionImmutability: false,
    },
  }),
 ],
})
export class AppModule {}

@ngrx/store ships with five (5) built-in runtime checks. Try disabled all checks