Angular:带有数组代理getter的ngFor以无限循环结尾

时间:2018-08-27 09:14:52

标签: javascript arrays angular ngfor

在使用数组代理时,我需要有关形式上* ngFor的问题的帮助。 我需要存档的内容->我们要通过PATCH提交数据,并且仅发送已更改的属性。使用简单的值(例如字符串或数字)很容易,但是当我们命中某些东西的数组时会很棘手。我从“不断变化”的库中汲取灵感,但必须针对我们的用例进行更新。

型号示例:

User{
  name:'test',
  age:'43',
  phones:[
    '+123 123456789','+321 098765432'
  ],
    address:[
      {street:'short',city:'Prague',zip:'12345'},
      {street:'third',city:'London':zip:'98765'}
  ]
}

我的代理处理程序:

const createProxy = function (value: any): any {
  let blocked = false;

  const handler = {
    get: (target: any, property: PropertyKey, receiver?: any): any => {

      const desc = Object.getOwnPropertyDescriptor(target, property);
      const value = Reflect.get(target, property, receiver);
      if (desc && !desc.writable && !desc.configurable) return value;

      try {
        return new Proxy(target[property], handler);
      } catch (error) {
        return value;
      }
    },
    defineProperty: (target: any, property: string, descriptor: PropertyDescriptor): boolean => {
      const result = Reflect.defineProperty(target, property, descriptor);
      if (!blocked) {
        updateMetadata(self, originalTarget);
      }
      return result;
    },
    deleteProperty: (target: any, property: PropertyKey): boolean => {
      const result = Reflect.deleteProperty(target, property);
      if (!blocked) {
        updateMetadata(self, originalTarget);
      }
      return result;
    },
    apply: (target: any, thisArg: any, argumentsList: ArrayLike<any>): any => {

      if (BLACKLIST.indexOf(target.name) > -1) {
        blocked = true;
        const result = false;
        if (target.name === 'splice') {
          const result = Reflect.apply(Array.prototype.splice, thisArg, argumentsList);
        } else {
          const result = Reflect.apply(target, thisArg, argumentsList);
        }

        updateMetadata(self, originalTarget);
        blocked = false;
        return result;
      }
      return Reflect.apply(target, thisArg, argumentsList);
    }
  };

  originalTarget = value;
  proxy = new Proxy(value, handler);
  return proxy;
};

我需要捕获地址数组上的更改并将其标记为已更改,但是当我向数组添加新地址,例如删除或更改一个嵌套属性(例如street)时,也将其标记为已更改。

我解决了如何存储这些更改并使其与一个“级别”实体进行测试的情况。

对于具有数组或其他嵌套对象的属性,我尝试了代理。使用模拟模型,它就像一个魅力。但是,当我以实际形式使用它时,* ngFor ...有问题,如果我尝试显示地址的输入,它将最终陷入吸气剂的无限循环中,我不得不使用任务管理器杀死该页面。如果我省略ngFor并手动显示一个地址(user.address [0] ...)的输入,就可以了,甚至更改路由也可以按预期进行。

0 个答案:

没有答案