javascript - 在不更改其原始值的情况下取回对象值 - Angular

Question

嗨，我在 Angular 中有一个表单，我使用来自 API 的 Observable 的值构建它。

.subscribe((res) => {
this.data = res['attributes'];
});

//this.data 是对象数组！！

this.attribs = modifyClean(this.data);
this.attribsOriginal = this.attribs;
Object.freeze(this.attribsOriginal);

使用 this.attribs 构建表单后。如果用户编辑其原始表单值并单击保存，则 api 将其保存。但是，如果 API 无法保存（500 错误或其他问题），我希望表单恢复其原始值。我不是故意使用响应式表单。但是当api在错误代码中失败时，这就是我正在做的事情

,error {
 this.attribs = this.attribsOriginal;
}

但这并不是用原始值替换表单值。它保留了价值观。我在错误块中控制台记录 this.attribs 和 this.attribsOriginal。它们都是相同的值。这怎么可能。我冻结了attribsOriginal。如果我说 this.attribs = []; 表单已按预期完全删除。但是为什么不 this.attribs = this.attribsOriginal，用原始值替换表单值。我认为无论您对 this.attribs 做什么，冻结 this.attribsOriginal 都不会产生任何影响。可以做些什么来避免这种情况？

标签： javascriptangularobjectmutation

Answer 1

看起来 this.attribs 是对 modifyClean(this.data) 返回的数据的引用，而 this.attribsOriginal 也是对相同数据的引用。如果您尝试克隆对象，这看起来很有帮助

Angular 使用更改检测来决定何时使用“this.attribs”数据构建/重建 dom 的一部分。由于没有任何变化，因此它不会构建/重建 dom。

我认为您可以尝试任意更改 component.ts 文件中的数据，然后将其更改回来，或者这可能会有所帮助