Angular 16: Array of nested Proxy object with ngFor/ngModel cause call stack overflow or timeout the page #52521
Description
Which @angular/* package(s) are the source of the bug?
common
Is this a regression?
I don't know
Description
For debugging purpose I have created this function for proxy nested object with a listener for log property value changes.
function buildProxy(poj: any, callback = console.log, tree = []): any {
return new Proxy(poj, {
get(target, prop) {
const value = Reflect.get(target, prop);
if (
value !== null &&
typeof value === 'object' &&
['Array', 'Object'].includes(value.constructor.name)
) {
return buildProxy(value, callback, tree.concat(prop as any));
}
return value;
},
set(target, prop, value) {
callback({
action: 'set',
path: tree.concat(prop as any).join('.'),
newValue: value,
preValue: Reflect.get(target, prop, value),
});
return Reflect.set(target, prop, value);
},
});
}This works well in angular (https://stackblitz.com/edit/stackblitz-starters-rqsl2q ), eg:
@Component({
selector: 'my-app',
standalone: true,
imports: [CommonModule, FormsModule],
template: `
<input type="text" [(ngModel)]="singleObj.foo.name"> `,
})
export class App
singleObj = buildProxy({ foo: { name: 'Angular 15' } });
}
the problem happen if a proxy object is used in a ngFor, in this case the result is a call stack overflow or timeout the page (see https://stackblitz.com/edit/stackblitz-starters-652pf3 ), eg:
@Component({
selector: 'my-app',
standalone: true,
imports: [CommonModule, FormsModule],
template: `
<div *ngFor="let obj of arrayObj">
<input type="text" [(ngModel)]="obj.foo.name">
</div> `,
})
export class App {
arrayObj = buildProxy([
{ foo: { name: 'Angular 15' } },
{ foo: { name: 'Angular 16' } },
]);
}
Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/stackblitz-starters-rqsl2q?file=src%2Fmain.ts
Please provide the exception or error you saw
call stack overflow or timeout the page
Please provide the environment you discovered this bug in (run ng version)
Angular 16 (see example: https://stackblitz.com/edit/stackblitz-starters-rqsl2q)
Anything else?
No response