角度2中的一种绑定对象答案

【问题标题】：One way binding object in angular 2角度2中的一种绑定对象
【发布时间】：2017-05-12 02:55:42
【问题描述】：

当您重复对象的数组以及尝试动态创建具有预定义值的新对象时，如何在 Angular 2 中实现单向绑定。

当用户使用预定义值复制对象时，我遇到了问题，在这两个对象中输入的值都变成了两个绑定。

this.arraylist=[{id:"0", name:"some name"}];

function add(){

let obj1= {id:"0", name:"some name"}

arraylist.push(obj1);

}

// when arraylist repeat with object values as model to input textbox all the inputbox model values are becoming two way binded.

【问题讨论】：

请发布您的模板代码。
html好吗？有点难以理解你的意思。

标签： angular binding

【解决方案1】：

当您将预定义的 obj 推入数组时，您只需将对象的 instance 设置为数组。这就是为什么当你编辑一个时，它们都被改变了。

您可以使用ES6 中的{...obj}，这将使用新实例复制现有对象。

arraylist.push({...obj1});

您可以通过此Plunker 确认。

【讨论】：

【解决方案2】：

这里的问题是我们直接将obj1 添加到this.arraylist。你必须确保将obj1 的副本添加到this.arraylist。

ES6 引入了Spread Operator("...")，可用于创建推送到数组的obj 副本。
ES6 引入了Object.assign({}, srcObj) 来创建副本。

下面附上示例

var arr = [1, 2, 3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4); 

// arr2 becomes [1, 2, 3, 4]
// arr remains unaffected

您的代码更正附在下面

方式一：

arraylist.push({...obj1});

方式 2：

let copyObj = Object.assign({}, this.item);
this.data.push(copyObj);

注意：还有其他技术可以在 JavaScript 中复制对象。

干杯！

【讨论】：