角度为2

时间:2017-05-12 02:55:42

标签: angular binding

如何在角度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.  




2 个答案:

答案 0 :(得分:1)

将预定义的obj推入数组时,只需将对象的<!DOCTYPE html> <html> <head> <script src="jquery-3.2.1.min.js"></script> <script> $(function(){ $("#includedContent").load("homePage.html"); }); </script> </head> <body> <div id="includedContent"></div> </body> </html> 设置为数组即可。这就是为什么当你编辑一个并且它们都被改变时。

您可以使用instance中的{...obj},这会使用新实例复制现有对象。

ES6

您可以使用此Plunker确认。

答案 1 :(得分:1)

此问题是我们直接将obj1添加到this.arraylist。 哟必须确保将obj1复制添加到this.arraylist

  1. ES6引入了Spread Operator(&#34; ...&#34;),可用于创建推送到阵列的obj副本。
  2. ES6引入了Object.assign({}, srcObj)来创建副本。
  3. 示例见

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

    您的代码更正位于以下

    方式1:

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

    方式2:

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

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

    干杯!