Angular 4取消勾选复选框导致Tests行消失问题的解决方法

看了你的代码和问题描述，核心问题是你目前把选中状态和UI渲染的数据源绑定在一起了——当取消勾选时，你从selectedPanels里移除了对应项，导致*ngFor渲染的数组发生变化，自然行就消失了。要实现“只改勾选状态，不删显示”的效果，我们需要把「选中状态」和「显示列表」彻底分开。

1. 重构选中状态的存储方式 #

首先，把原来的panelIds和selectedPanels替换成专门记录选中状态的结构，用Set<number>存选中的面板/测试ID会更高效：

// 存储所有选中的面板/测试ID
selectedIds = new Set<number>();

2. 修改HTML模板的绑定逻辑 #

始终用原始的panels数组渲染UI，复选框的选中状态绑定到selectedIds里是否包含对应ID：

<ngb-panel *ngFor="let panel of panels" id="{{panel.Id}}" [title]="panel.Name">
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input"
           [name]="panel.Id + '-' + panel.Moniker"
           [ngModel]="isPanelChecked(panel)"
           (ngModelChange)="onPanelCheckboxUpdate($event, panel)"
           [id]="panel.Id + '-' + panel.Moniker">
    <span class="custom-control-indicator"></span>
  </label>
</ng-template>
<ng-template ngbPanelContent>
  <div class="individual-panel" *ngFor="let test of panel.Tests">
    <span class="text-dimmed">{{test.Name}}</span>
    <span *ngIf="panel.Name.includes('ENA') || panel.Name.includes('Celiac')">
      <label class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input"
               [name]="test.Id + '-' + test.Code"
               [ngModel]="selectedIds.has(test.AssociatedPanel?.Id || test.Id)"
               (ngModelChange)="onTestCheckboxUpdate($event, test, panel)"
               [id]="test.Id + '-' + test.Code">
        <span class="custom-control-indicator"></span>
      </label>
    </span>
  </div>
</ng-template>

3. 重写TS里的状态判断和更新方法 #

替换checkAllTestsSelected为isPanelChecked #

这个方法只负责判断面板是否被全选或本身被选中，不再修改数据源：

isPanelChecked(panel: TestOrderPanel): boolean {
  // 判断面板本身是否被选中
  if (this.selectedIds.has(panel.Id)) return true;
  // 判断所有子测试的关联面板是否都被选中
  const allTestsSelected = panel.Tests.every(test => {
    const testId = test.AssociatedPanel?.Id || test.Id;
    return this.selectedIds.has(testId);
  });
  return allTestsSelected;
}

修改onPanelCheckboxUpdate方法 #

只更新selectedIds集合，不修改原始面板数组：

onPanelCheckboxUpdate($event: boolean, panel: TestOrderPanel) {
  if ($event) {
    // 勾选面板：添加面板ID，同时移除所有子测试的ID（避免重复选中）
    this.selectedIds.add(panel.Id);
    panel.Tests.forEach(test => {
      const testId = test.AssociatedPanel?.Id || test.Id;
      this.selectedIds.delete(testId);
    });
  } else {
    // 取消勾选面板：移除面板ID，子测试的选中状态保持不变
    this.selectedIds.delete(panel.Id);
    // 如果需要取消面板时同时取消所有子测试，取消下面的注释：
    // panel.Tests.forEach(test => {
    //   const testId = test.AssociatedPanel?.Id || test.Id;
    //   this.selectedIds.delete(testId);
    // });
  }
  this.updateSession();
}

修改onTestCheckboxUpdate方法 #

同样只更新selectedIds，不再操作selectedPanels：

onTestCheckboxUpdate($event: boolean, test: TestOrderPanelTest, panel: TestOrderPanel) {
  const testId = test.AssociatedPanel?.Id || test.Id;
  if ($event) {
    this.selectedIds.add(testId);
    // 如果所有子测试都被选中，自动勾选面板
    const allTestsSelected = panel.Tests.every(t => {
      const tId = t.AssociatedPanel?.Id || t.Id;
      return this.selectedIds.has(tId);
    });
    allTestsSelected ? this.selectedIds.add(panel.Id) : this.selectedIds.delete(panel.Id);
  } else {
    this.selectedIds.delete(testId);
    // 只要有一个子测试取消，面板也要取消勾选
    this.selectedIds.delete(panel.Id);
  }
  this.updateSession();
}

调整updateSession方法 #

把selectedIds转换成需要的格式存入会话：

updateSession() {
  // 把Set转换成数组，存入session
  this.testSelectionSession.SelectedPanelIds = Array.from(this.selectedIds);
  // 如果需要selectedPanels，从原始数据里筛选即可
  this.selectedPanels = this.panels.filter(panel => {
    if (this.selectedIds.has(panel.Id)) return true;
    // 检查子测试是否有选中的
    return panel.Tests.some(test => {
      const testId = test.AssociatedPanel?.Id || test.Id;
      return this.selectedIds.has(testId);
    });
  });
}

核心思路总结 #

• 始终用原始的panels数组渲染UI，确保不管选中状态如何，列表都不会消失；
• 用独立的selectedIds集合记录选中状态，复选框的ngModel只和这个集合绑定；
• 所有勾选/取消操作都只更新selectedIds，不修改原始数据源；
• 面板的全选状态通过判断子项的选中状态动态计算，不需要修改渲染数组。

这样修改后，你勾选或取消Tests时，只会改变复选框的状态，对应的行不会从前端消失。

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