Angular17中带(click)事件的复选框点击后不显示勾选状态

核心问题在于：复选框状态未与Angular数据模型绑定，依赖原生DOM操作的方式无法被Angular变更检测追踪；同时模板中多层*ngIf导致事件触发后DOM元素被重新创建，原生勾选状态直接丢失。即便手动设置checked属性，也会因DOM重建被覆盖。

1. 用数据模型管理复选框状态 #

在组件类中定义数据结构，存储每个复选框的选中状态，通过唯一标识对应表格行列：

// 组件类内新增
checkedStates: { [key: string]: boolean } = {};

// 生成每个复选框的唯一键值
getCheckboxKey(header: any, row: any, rowIndex: number): string {
  return `${header.headVarA}-${header.headVarB}-${row.rowVarA}-${rowIndex}`;
}

2. 重构模板，使用双向数据绑定 #

替换原模板中的多层*ngIf结构，用ng-container减少DOM节点，同时通过[(ngModel)]绑定状态，(change)触发业务函数：

<tbody *ngFor="let header of headerArray; let headerIndex = index;">
    <tr>
        <td *ngFor="let row of tsidRows; let rowIndex = index;">
            <ng-container *ngIf="header.headVarA && header.headVarB && row.rowVarA">
                <input 
                    #prodCheckbox 
                    type="checkbox" 
                    class="form-check-input"
                    [disabled]="!this.repositoryArray.includes(header.headVarA) && row.rowVarB"
                    [(ngModel)]="checkedStates[getCheckboxKey(header, row, rowIndex)]"
                    (change)="createProductAllocation($event, header.headVarA.substring(0,6).trim(), header.headVarB.substring(0, 8).trim(), row.rowVarA, row.rowVarB, rowIndex)"
                >
            </ng-container>
            <ng-container *ngIf="!header.headVarA || !header.headVarB || !row.rowVarA">
                <input 
                    #prodCheckbox 
                    type="checkbox" 
                    class="form-check-input" 
                    disabled
                >
            </ng-container>
        </td>
    </tr>
</tbody>

关键修改点：

• 用ng-container替代span/div，避免额外DOM节点和不必要的DOM重建
• 通过[disabled]控制禁用状态，不再销毁重建复选框元素
• [(ngModel)]绑定状态到组件数据模型，让Angular自动追踪变化
• 用(change)事件确保状态真正变化后触发业务逻辑

3. 修改uncheckAll()函数，操作数据模型而非原生DOM #

uncheckAll() {
  // 清空所有选中状态，Angular会自动同步到DOM
  this.checkedStates = {};
  // 若需保留键名，可遍历设置为false：
  // Object.keys(this.checkedStates).forEach(key => this.checkedStates[key] = false);
}

4. 确保导入FormsModule #

使用ngModel需要在组件所属模块中导入FormsModule：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他模块导入
    FormsModule
  ]
})
export class YourComponentModule { }

• 手动设置event.target.checked或Renderer2的操作，会因*ngIf触发DOM重建而失效，修改的元素被销毁后新元素无状态
• 仅改(change)事件但未绑定数据模型，Angular无法感知原生DOM状态变化，DOM重建后状态丢失
• 变更检测策略调整无法解决“无数据绑定”的核心问题，Angular不会追踪原生DOM的状态变更

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