Angular中点击按钮仅取消默认选中复选框的实现方法

要实现点击清除按钮仅取消默认选中的复选框（parent1、parent3），同时保留用户手动勾选的parent2状态，需要做以下两处关键修改：

1. 修复复选框的状态绑定问题 #

原代码使用[checked]单向绑定，用户手动勾选复选框后，组件内的child.checked值不会同步更新，导致无法正确识别parent2的当前状态。需要改为双向数据绑定[(ngModel)]：

<li *ngFor="let child of nestedjson; let i = index">
  <input type="checkbox" [(ngModel)]="child.checked">
  {{child.name}}
</li>

<div><button (click)="clear()" type="submit">clear</button></div>

2. 修改清除逻辑，区分默认选中项 #

需要标记每个选项的默认选中状态，这样在清除时只针对默认选中的项进行操作：

修改后的TypeScript代码（新增默认状态字段） #

nestedjson = [
  { name: 'parent1', value: ['child11', 'child12'], checked: true, defaultChecked: true },
  { name: 'parent2', value: ['child2'], checked: false, defaultChecked: false },
  { name: 'parent3', value: ['child3'], checked: true, defaultChecked: true },
];

clear() {
  this.nestedjson.forEach((child) => {
    // 仅将默认选中的项取消选中
    if (child.defaultChecked) {
      child.checked = false;
    }
  });
}

无需新增字段的写法（单独保存默认状态数组） #

如果不想给对象新增字段，可以在组件初始化时单独保存一份初始选中状态：

nestedjson = [
  { name: 'parent1', value: ['child11', 'child12'], checked: true },
  { name: 'parent2', value: ['child2'], checked: false },
  { name: 'parent3', value: ['child3'], checked: true },
];

private defaultCheckedStates: boolean[];

ngOnInit() {
  // 初始化时保存默认选中状态
  this.defaultCheckedStates = this.nestedjson.map(item => item.checked);
}

clear() {
  this.nestedjson.forEach((child, index) => {
    if (this.defaultCheckedStates[index]) {
      child.checked = false;
    }
  });
}

效果说明 #

修改完成后：

• 页面加载时parent1、parent3默认选中，parent2未选中；
• 用户勾选parent2后，child.checked会同步变为true；
• 点击清除按钮，parent1、parent3变为未选中，parent2保持选中状态。

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