ngFor trackBy 未使用 ngModel 正确识别项目

Question

我会简短的。

这是关于 stackblitz 的问题：trackByBugntfree\

解释：
资源包含使用复选框显示在屏幕上的权限。\

Objective:
选中“权限”时，仅应使用 ngModel 修改其引用的对象。\

问题：
当检查资源“A”的权限“一”时，资源“B”和“C”的权限“一”也被检查。

编辑：可能是 slice 的问题，我会尝试解决这个问题

Answer 1

你需要在trackby中return permission.id（trackby需要一个唯一的标识符），否则将无法工作

UPD：但你的问题与trackby无关。对于您尝试引用相同权限数组的所有资源，因此 angular 将它们视为相同。有不同的可能解决方案，但最明显的一个是在每个资源中拥有一个权限属性，这样所有权限都会有不同的引用。

Answer 2

因为切片 returns 浅拷贝，当我们改变 input.try 中的值以使用 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

ngFor trackBy 未使用 ngModel 正确识别项目

ngFor trackBy is not identifying items correctly using ngModel

angularjs-track-by

ngfor

angular