带有（单击）事件侦听器的 HTML 复选框输入会在单击时停止显示复选框勾选

Question

我最近接手了一个 Angular17 项目，并一直在检查以前的开发人员留给我的代码。出现的一个问题与表格中的复选框输入有关。

每当单击任何复选框时，都应该调用一个函数。它成功完成了，但是复选框没有被“勾选”。

这是我正在使用的生成复选框的 HTML（一些变量名称已更改）：

<tbody *ngFor="let header of headerArray; let headerIndex = index;">
    <tr>
        <td *ngFor="let row of tsidRows; let rowIndex = index;">
            <!-- If all variables have a value -->
            <span *ngIf="header.headVarA && header.headVarB && row.rowVarA">
                <!-- Normal Checkbox -->
                <div *ngIf="!(!this.repositoryArray.includes(header.headVarA) && row.rowVarB)">
                    <input #prodCheckbox type="checkbox" class="form-check-input" 
(click)="createProductAllocation($event, header.headVarA.substring(0,6).trim(), header.headVarB.substring(0, 8).trim(), row.rowVarA, row.rowVarB, rowIndex)">
                </div>

                <!-- Error Checkbox -->
                <div *ngIf="!this.repositoryArray.includes(header.headVarA) && row.rowVarB">
                    <input #prodCheckbox type="checkbox" class="form-check-input" disabled>
                </div>
            </span>
            <!-- If any variables are missing - Error Checkbox -->
            <span *ngIf="!header.headVarA || !header.headVarB || !row.rowVarA">
                <div>
                    <input #prodCheckbox type="checkbox" class="form-check-input" disabled>
                </div>
            </span>
        </td>
    </tr>
</tbody>

*ngIf 语句可能无关紧要，因为复选框仍在正常生成。类 form-check-input 是一个 Bootstrap 类。

函数 createProductAllocation(...) 也不相关，因为调用任何函数，包括：

testFunction() {
    console.log("Hello World");
}

停止复选框勾选。 checkbox.checked 属性在单击后返回 true ，但由于该复选框未选中，我无法“取消选中”它以将其返回为 false。在开发者工具中检查 HTML 时，checked 属性也不会直接添加到元素中。

我在 .ts 文件中也有这个函数，当组件中较早进行更新时，它会取消选中所有复选框，但在添加 console.log 后，我确定在单击复选框时永远不会调用此函数。

@ViewChildren("prodCheckbox") pcheckboxes: QueryList<ElementRef>;
uncheckAll() {
  this.pcheckboxes.forEach((element) => {
    element.nativeElement.checked = false;
  });
}

我不会撒谎，我向 ChatGPT 询问是否可以得到快速解决方案；那里的建议都不起作用。以下是我迄今为止尝试过的：

1. 让 （点击） 事件调用不同的函数，然后调用我的实际函数。
2. 将 （单击） 更改为 （更改）
3. 将 ChangeDetectionStrategy 从 OnPush 更改为 Default
4. 手动强制 event.target.checked 为 true
5. 使用 changeDetectorRef.detectChanges()
6. 将 （单击） 事件委托给父元素
7. 使用 Angular Renderer2 强制 checked 属性为 'checked'
8. 制作整个 Angular 复选框组件来处理事件

尝试了上面列出的所有内容后，该函数仍然成功调用，但复选框仍然没有勾选。删除 (click) 事件侦听器允许复选框像平常一样勾选/取消勾选，但显然不再调用该函数。

我想要的只是让复选框元素在状态更改时调用该函数，同时让它勾选/取消勾选，我认为这是正常行为？

我已经尝试修复这个问题大约 3 天了，我认为这将是一个简单的修复。非常感谢任何帮助。

Answer 1

我现在只想回答这个问题，因为我已经解决了，感谢@Eliseo 的建议

他们建议在我的 *ngFor 循环中使用 trackBy，我是这样实现的：

<tbody *ngFor="let header of headerArray; let headerIndex = index; trackBy: trackByHeaderIndex">
    <tr>
        <td *ngFor="let row of tsidRows; let rowIndex = index; trackBy: trackByRowIndex">
            <!-- If all variables have a value -->
            <span *ngIf="header.headVarA && header.headVarB && row.rowVarA">
                <!-- Normal Checkbox -->
                <div *ngIf="!(!this.repositoryArray.includes(header.headVarA) && row.rowVarB)">
                    <input #prodCheckbox type="checkbox" class="form-check-input" 
(click)="createProductAllocation($event, header.headVarA.substring(0,6).trim(), header.headVarB.substring(0, 8).trim(), row.rowVarA, row.rowVarB, rowIndex)">
                </div>

                <!-- Error Checkbox -->
                <div *ngIf="!this.repositoryArray.includes(header.headVarA) && row.rowVarB">
                    <input #prodCheckbox type="checkbox" class="form-check-input" disabled>
                </div>
            </span>
            <!-- If any variables are missing - Error Checkbox -->
            <span *ngIf="!header.headVarA || !header.headVarB || !row.rowVarA">
                <div>
                    <input #prodCheckbox type="checkbox" class="form-check-input" disabled>
                </div>
            </span>
        </td>
    </tr>
</tbody>

trackByHeaderIndex(index: number, item: any) {
  return index;
}

trackByRowIndex(index: number, item: any) {
  return index;
}

这有效，现在函数被调用，并且复选框正常勾选/取消勾选。