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

我正在Angular中开发一个Multi Select下拉列表，该下拉列表也具有搜索功能。那就是当我通过我的主数据解析从输入字段给出的输入并仅在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具有两种绑定(bind)方式，但是我不知道如何根据自己的要求进行修改。还是有其他解决方法。欢迎提出建议。

最佳答案

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

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

{}:单个对象的

[]:用于收集对象

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 );

关于javascript - 如何在Angular -2/4中删除双向数据绑定(bind)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44795040/