Angular

Question

我在三个组件中使用了一个名为 MaxRecordValues 的常量值。所以我在一个普通的 constant.ts 文件中声明了它。

export const MaxRecordValues = [
  {
    value: 10,
    isChecked: false,
  },
  {
    value: 25,
    isChecked: false,
  },
  {
    value: 50,
    isChecked: true,
  },
  {
    value: 100,
    isChecked: false,
  },
];

我在每个组件中都将其分配为 maxRecords = MaxRecordValues; 此常量用于显示带有单选按钮选项的下拉列表。 value 表示下拉列表中的值，isChecked 用于显示使用

启用的选项

<input type="checkbox"
       [(ngModel)] = dataItem.isChecked>

Dropdown image reference

默认情况下将选择 50，如果我们单击任何值，maxRecords 中的特定 isChecked 将被指定为 true，并且该值将在 UI 中显示为已启用。但问题是，如果我使用其局部变量 maxRecords 更改一个组件中的任何值，那么公共常量 MaxRecordValues 也会发生变化，因此在第一个组件中选择的值也在第二个组件中启用和第三个组件。这三个组件都写在同一个文件夹下，有一个共同的父组件。是因为这种亲子关系还是有其他原因？如何防止在另一个组件中反映更改的值？

Answer 1

防止这个问题很简单。在您使用它的每个组件中复制您的对象。就这样：

maxRecords = JSON.parse(JSON.stringify(MaxRecordValues));

通过这种方式，您可以创建一个克隆，该克隆具有自己的对象引用并且不连接到其他组件中的类似对象。

Angular - 一个组件中更改的 Const 反映在另一组件中

Angular - Const changed in one component is reflecting in other component

components

constants