Angular 17复选框异常：筛选状态下操作致其他复选框误选

问题根源 #

你遇到的问题是Angular @for 循环使用 track $index 导致的DOM复用问题：

• 筛选状态下，勾选/取消勾选某心愿后，该心愿因isComplete状态变更被移出visibleItems数组
• 数组后续元素的索引自动前移，Angular基于索引跟踪DOM元素时，会复用被移除元素的DOM节点
• 这导致下一个元素的复选框继承了被移除节点的勾选状态，虽然数据本身是正确的

解决步骤 #

1. 给WishItem类添加唯一标识

修改WishItem类，增加唯一id属性，用于跟踪每个心愿实例：

export class WishItem {
  id: number;
  wishName: string;
  isComplete: boolean;

  constructor(wishName: string) {
    this.wishName = wishName;
    this.isComplete = false;
    // 生成简单唯一ID，也可用自增计数器或UUID库
    this.id = Date.now() + Math.random();
  }
}

2. 修改@for循环的跟踪策略

将HTML中的循环跟踪从$index改为item.id，让Angular基于每个心愿的唯一标识跟踪DOM元素：

<ul class="wishList">
  <label style="font-weight: 800; font-size: large;">Wishlist:</label>
  <li>
    @for (item of visibleItems; track item.id) {
      <label>
        {{$index + 1}}. {{item.wishName}} {{item.isComplete}}
        <input type="checkbox" class="checkbox" [checked]="item.isComplete" (change)="checkboxToggle(item)">
      </label>
      <div>&NewLine;</div>
    } @empty {
      <label> There are no wishes in wishlist </label>
    }
  </li>
</ul>

3. 可选优化：替换click事件为change事件

复选框的状态变更用change事件更贴合语义，同时可移除多余的$event参数：

checkboxToggle(item: WishItem)
{
  item.isComplete = !item.isComplete;
}

原理说明 #

当使用track item.id时，Angular会为每个心愿实例关联独立的DOM节点，不会因为数组索引变化而复用DOM。这样当某个心愿被移出筛选结果后，剩余元素的DOM节点会保持自身状态，不会出现复选框误选的情况。

内容的提问来源于stack exchange，提问作者MirageDreamer