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

【问题标题】：Get the object values back without changing its original values - Angular在不更改其原始值的情况下取回对象值 - Angular
【发布时间】：2020-03-02 11:03:36
【问题描述】：

您好，我在 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 都不会产生任何影响。有什么办法可以避免这种情况？

【问题讨论】：

标签： javascript angular object mutation

【解决方案1】：

看起来 this.attribs 是对 modifyClean(this.data) 返回的数据的引用，而 this.attribsOriginal 也是对相同数据的引用。如果你试图克隆一个对象this looks helpful

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

我觉得你可以尝试任意更改component.ts文件中的数据，然后改回来，或者this might be helpful

【讨论】：

我尝试了所有的可能性。我也尝试了你的建议。为什么对象深度克隆或冻结或任何方法都不起作用的问题是我对每个字段值使用 ngModel。我认为这正在改变最初用于构建表单的对象数组的原始引用。从字面上看，任何方法都不起作用。尝试了 RXjs 可观察对象，将初始值存储在行为主题中......这也不起作用。我什至没有用下一个操作员改变主题。我只在收到 api 数据时使用过一次。但是 ngModel 仍然改变了对象值的行为主题数组。
终于终于终于有一种方法奏效了..就是..我使用crypto-js加密和解密值来替换原来的this.attribs值。
如果您在模板中编写 [(ngModel)]（带有方括号和圆括号），那么这会告诉 Angular 使用 2 向绑定，它会像您说的那样更改对象。但是你可以只写不带括号的，比如，这样数据只会从 component.ts 流向模板，而不是向后流动。