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

【问题标题】：ngFor trackBy is not identifying items correctly using ngModelngFor trackBy 未使用 ngModel 正确识别项目
【发布时间】：2023-03-04 06:56:01
【问题描述】：

我会很简短。

这里是 stackblitz 上的问题：trackByBugntfree\

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

目标：
当检查“权限”时，只应使用 ngModel 修改其引用的对象。\

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

编辑：也许 slice 是问题所在，我会尝试解决这个问题

【问题讨论】：

标签： angular ngfor angularjs-track-by

【解决方案1】：

由于 slice 返回浅拷贝，当我们更改输入中的值时，它正在修改所有值。尝试使用 JSON.parse(JSON.stringify(this.permissions)) p>

 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

【讨论】：

【解决方案2】：

你需要在trackby中返回permission.id（trackby需要一个唯一的标识符），否则不起作用

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

【讨论】：

trackby 不是问题。但是谢谢，我会把这篇文章留在这里，它不是很复杂，但调试 ngModel + ngFor 可能很困难