如何在 Angular -2/4 中删除双向数据绑定

Posted 2023-02-27

【中文标题】如何在 Angular -2/4 中删除双向数据绑定

【英文标题】：How to Remove Two Way Data Binding in Angular -2/4

【发布时间】：2017-12-01 09:05:12

【问题描述】：

我正在 Angular 中开发一个多选下拉菜单，它也有搜索功能。那是当我通过我的主数据解析从输入字段给出的输入并仅在 DOM 中显示过滤后的内容时。这是我的功能：

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 */    
        
    

代码的问题是，每次调用modifyFilter 方法时，catalogManufacturerNames 也会随着filterContent 一起更改。因此，每次我调用modifyFilter 时，由/******/ 标记的行filterContent 被分配给前一个filterContent，而不是全局且可能未更改的catalogManufacturerNames。我认为问题在于filterContent 和catalogManufacturerNames 有两种方式绑定，但我不知道如何根据我的要求进行修改。或者有没有其他方法可以解决它。欢迎提出建议。

【参考方案1】：

在这种情况下，您必须使用 Object.assign 或 DeepCopy。它将创建您的对象/变量的副本，因此当您对主要对象执行任何过滤器时，它不会反映在复制的对象中，反之亦然。

您可以根据需要使用,[]。

：用于单个对象

[]: 用于对象集合

let copiedItem = Object.assign(, copiedItem , PrimaryItem );

详情请参考：https://developer.mozilla.org/en/docs/Web/javascript/Reference/Global_Objects/Object/assign

选项：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;
  

从组件调用

let copiedItem: any[] = this.DeepCopy(PrimaryItem );

【讨论】：

哇！有效。它满足了我的需求并且运行良好。有没有其他技术含量较低的方法，比如=比这个简单吗？

我的意思是= 分配比Object.assign 简单得多，对吧？我想知道是否有任何捷径可以让语法更简单。

是的，你说得对，用=赋值比object.assign简单，但是直接赋值不仅复制对象，还复制引用

我从 Mozilla 文档中了解到，感谢您。但是没有更简单的选择吗？

如果是这样你可以试试，“让copyedItem = primaryItem.slice(0);”不过不确定代码质量/最佳实践。

【参考方案2】：

作为使用Object.assign 的更简单的替代方法，您可以使用扩展运算符将双重绑定对象的属性复制到另一个对象：

this.filterContent = ...this.catalogManufacturerNames;

参考： http://redux.js.org/docs/recipes/UsingObjectSpreadOperator.html

【讨论】：

您建议的方法在编译打字稿时会抛出错误。

【参考方案3】：

假设如果您有一个名为“a”的变量，其值为“apple”和名为“b”的变量，您想要为其分配一个值“a”，并且您不希望“b”的任何未来更改影响"a" 然后只需使用下面的代码

var b=Object.assign(a); //这将停止双向绑定，这意味着b的任何变化都不会影响a