I built a simple component for displaying a list of items. Inside the component, I have an ngfor loop that includes checkboxes with [(ngModel)] bindings. Everything seems to be functioning correctly.
<div *ngFor="let armor of armorList">
<input type="checkbox" [(ngModel)]="armor.obtained" />
<span>{{armor.name}}</span>
</div>
In my code, I have implemented a get property called name (implementation removed for this example).
get name(): string {
console.log("test");
return "test";
}
One thing that has caught my attention is that when I click on the checkbox of one item in the list, the get property gets called twice for all items in the list. This behavior seems odd as I would expect it not to be called at all since I am only updating a single property of a single item.
To see this behavior in action, you can check out the example I created here. When you click on a checkbox, you'll notice that "test" is logged to the console 6 times.
If anyone has any insights or ideas on why this might be happening, please feel free to share them!
Thanks,
Leo