在使用数组代理时,我需要有关形式上* 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] ...)的输入,就可以了,甚至更改路由也可以按预期进行。