时间戳

首页 > 解决方案 > Angular - 修改订阅内的对象

typescript - Angular - 修改订阅内的对象

问题描述

我有方法 getParameters() 返回一个包含参数列表的设置对象，我在订阅中实现了代码，我在参数列表中添加了一些项目，当我显示新对象时，我发现列表中有添加的项目，但问题是当我显示返回的对象时，我发现它也发生了变化

this.settingService.getParameters().subscribe((setting: Setting) => {
    const settingToSave = setting;

    this.parameters.forEach(element => {
       if (settingToSave.parameters.some(parameter => parameter.parameterId === element.parameterId)) {
          settingToSave.parameters = settingToSave.parameters.filter(parameter => parameter.parameterId != element.parameterId);
       }
        settingToSave.parameters.push(element);
     });

    console.log(settingToSave);
    console.log(setting); // same content as the object settingToSave

}

标签： typescript

解决方案

通过const settingToSave = setting，您正在创建参考，而不是副本。因此，当您修改 的属性时settingToSave，您修改的是与直接修改时相同的对象setting。

一个显示引用和副本之间区别的简单示例（在这种情况下，我正在使用创建副本JSON.parse(JSON.stringify(...))，我不建议将其用于实际的现实项目）：

const original = {"property":"value"};
const reference = original;
const copy = JSON.parse(JSON.stringify(original));

reference.property = "new value";

console.log(reference.property === original.property);
console.log(copy.property !== original.property);

请参阅如何在 javascript 中进行深度克隆以获取替代方案。

推荐阅读