ngFor trackBy is not identifying items correctly using ngModel

Question

I will be brief.

Here's the problem on stackblitz: trackByBugntfree\

Explanation:
Resources contain ppermission that are displayed on screen with checkboxes.\

Objective:
When a "permission" is checked, only its referenced object should be modified by using ngModel.\

Issue:
When permission "one" of resource "A" is checked, permission "one" of resource "B" and "C" too.

Edit: Maybe slice is the problem, I will try to fix that

score 1 · Accepted Answer · answered Jul 14 '21 at 11:32

Since slice returns shallow copy, It's modifing all the value when we change the value in input.try to do deep copy using JSON.parse(JSON.stringify(this.permissions))

 resources = [
    { resourceId: 1, name: 'One', permissions: JSON.parse(JSON.stringify(this.permissions)) },
    { resourceId: 2, name: 'Two', permissions: JSON.parse(JSON.stringify(this.permissions))},
    { resourceId: 3, name: 'Three', permissions: JSON.parse(JSON.stringify(this.permissions))}
  ];

Forked Example

George Koval. · Answer 2 · 2021-07-14T11:29:31.543

-1

you need to return permission.id in the trackby (trackby expects a unique identifier), otherwise it won't work

UPD: but your problem is not related to trackby. For all resources you're trying to reference the same array of permissions, so angular treats them as the same. There're different possible solutions, but the most obvious one is to have a permissions property inside each of resources, so that all permissions would have different references.

edited Jul 14 '21 at 11:29

answered Jul 14 '21 at 11:19

George Koval.

78
5

trackby wasn't the problem. But thanks, I will leave this post here, It isn't very complex but It can be hard to debug ngModel + ngFor – AdriGB Jul 14 '21 at 11:30

ngFor trackBy is not identifying items correctly using ngModel

2 Answers2