Angular: ngFor с массивным прокси-геттером заканчивается в бесконечном цикле - PullRequest
Новая
       6

Angular: ngFor с массивным прокси-геттером заканчивается в бесконечном цикле

0 голосов
/ 27 августа 2018

Мне нужна помощь с проблемой о * ngFor в форме при использовании Array Proxy.Что мне нужно заархивировать -> Мы хотим отправить наши данные с помощью PATCH и отправлять только те атрибуты, которые были изменены.Это легко с простыми значениями, такими как строка или число, но когда мы сталкиваемся с массивами чего-то, это сложно.Я вдохновился библиотекой "on-change", но мне пришлось обновить ее для нашего варианта использования.

пример модели: 

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.

IЯ решил, как сохранить эти изменения и протестировать их с одним объектом уровня.

Для атрибутов с массивами или другими вложенными объектами я пробовал Proxy.С издеваться над моделью это работает как шармНо когда я использую его с реальной формой, у меня возникает проблема с * ngFor ..., если я пытаюсь показать входные данные для адресов, это заканчивается бесконечным циклом получения, и мне пришлось использовать диспетчер задач, чтобы убить эту страницу.если я опускаю ngFor и вручную отображаю входные данные для одного адреса (user.address [0] ...), то все в порядке, и даже исправление изменений работает, как и ожидалось.

...