[英]How to Remove Two Way Data Binding in Angular -2/4
I am developing a Multi Select dropdown in Angular which also has search. 我正在开发Angular中的Multi Select下拉列表,该下拉列表也具有搜索功能。 That is when I am parsing the input given from the input field through my master data and displaying only the filtered contents in the DOM.
那就是当我通过主数据解析从输入字段给出的输入并仅在DOM中显示过滤的内容时。 This is my function:
这是我的功能:
modifyFilter(value: any) {
console.log('value', value); //The value passed from DOM
this.filterContent = this.catalogManufacturerNames; /******/
for(let i=0; i<this.catalogManufacturerNames.length;i++) {
/* Search catalogManufacturerNames for the value and splice all
filterContent not having the matching value */
}
}
The problem with the code is that everytime the modifyFilter
method is called the catalogManufacturerNames
is also changed along with the filterContent
. 代码的问题在于,每次调用
modifyFilter
方法时, catalogManufacturerNames
也会与filterContent
一起更改。 So every time I call modifyFilter
, the row marked by /******/ the filterContent
gets assigned to the previous filterContent
than the global and presumably unchanged catalogManufacturerNames
. 因此,每当我调用
modifyFilter
,用/ ****** /标记的那filterContent
将分配给前一个filterContent
不是全局的且可能未更改的catalogManufacturerNames
。 I think the problem is that filterContent
and catalogManufacturerNames
get two way binded, but I do not know how to modify it to my requirements. 我认为问题是
filterContent
和catalogManufacturerNames
绑定有两种方式,但是我不知道如何根据自己的要求进行修改。 Or is there any other way to go about it. 还是有其他解决方法。 Suggestions are welcome.
欢迎提出建议。
In this case you have to use Object.assign OR DeepCopy . 在这种情况下,您必须使用Object.assign或DeepCopy 。 It will create a copy of your object/variable so when ever you perform any filter on primary object it will not reflect in copied object and vice versa.
它将创建对象/变量的副本,因此,无论何时对主对象执行任何过滤,它都不会反映在复制的对象中,反之亦然。
You can use {},[]
as per your requirement. 您可以根据需要使用
{},[]
。
{}: for single object {}:对于单个对象
[]: for collection of objects []:用于收集对象
let copiedItem = Object.assign({}, copiedItem , PrimaryItem );
Please refer for detail: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign 请参阅详细信息: https : //developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
Option: 2 Deep Copy 选项:2深拷贝
DeepCopy(obj: any): any {
let clonedObject;
if (obj === null || typeof obj !== 'object') {
return obj;
}
if (obj instanceof Array) {
clonedObject = [];
for (let i = 0; i < obj.length; i++) {
clonedObject[i] = this.deepCopy(obj[i]);
}
return clonedObject;
}
if (obj instanceof Date) {
clonedObject = new Date(obj.valueOf());
return clonedObject;
}
if (obj instanceof RegExp) {
clonedObject = RegExp(obj.source, obj.flags);
return clonedObject;
}
if (obj instanceof Object) {
clonedObject = new obj.constructor();
for (const attr in obj) {
if (obj.hasOwnProperty(attr)) {
clonedObject[attr] = this.deepCopy(obj[attr]);
}
}
return clonedObject;
}
}
Call from component 来自组件的呼叫
let copiedItem: any[] = this.DeepCopy(PrimaryItem );
As a simpler alternative to using Object.assign
, you can use the spread operator to copy the properties of the double-bound object to another: 作为使用
Object.assign
一种更简单的替代Object.assign
,可以使用传播运算符将双界对象的属性复制到另一个对象:
this.filterContent = {...this.catalogManufacturerNames};
Reference: http://redux.js.org/docs/recipes/UsingObjectSpreadOperator.html 参考: http : //redux.js.org/docs/recipes/UsingObjectSpreadOperator.html
Suppose if you have a variable called "a" having value "apple" and variable called "b" to which you want to assign a value of "a" and you don't want any future change of "b" affects "a" then simply use the code below 假设您有一个值“ apple”的变量“ a”和要为其分配值“ a”的变量“ b”,并且您不希望将来任何对“ b”的更改都会影响“ a”然后只需使用下面的代码
var b=Object.assign(a); var b = Object.assign(a); //This will stop two-way binding which means any change in b doesn't impact a
//这将停止双向绑定,这意味着b中的任何更改都不会影响a
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.