Angular取消全选时保留必填/禁用复选框的解决方案

场景说明 #

在Angular项目中使用mat-selection-list实现复选框选择列表功能时，原有全不选方法直接调用clear()会清空所有选项的选中状态，包括标记为column.template.Mandatory的必填、禁用复选框，需要实现这类强制项始终保持选中，不受全不选操作影响。

原有问题代码 #

HTML模板 #

<mat-selection-list #selectedColumns [(ngModel)]="selectedOptions">
  <div class="content-section">
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title> Account<mat-panel-title>
      <mat-expansion-panel-header>
      <mat-list-option class="download-columns" 
        checkboxPosition="before"
        *ngFor="let column of singleNodeColumns" 
        [selected]="column.template.Mandatory"
        [disabled]="column.template.Mandatory" 
        [value]="column.template">
        <div class="down load-columns-text">
          <span> {{column.template.Name}}</span>

注：原模板存在标签未闭合、标签名书写错误、class名多余空格问题，使用前需要修正：将<mat-panel-title>的闭合标签改为</mat-panel-title>，<mat-expansion-panel-header>闭合标签改为</mat-expansion-panel-header>，class名down load-columns-text改为download-columns-text，补全所有未闭合的组件标签。

TS逻辑 #

DeSelectionAll() { 
  this.selectedColumns.selectedOptions.clear(); 
}

实现方案 #

mat-selection-list的selectedOptions是内置的SelectionModel实例，原生clear()方法不会区分选项是否禁用/必填，直接清空所有选中状态。修改DeSelectionAll方法，清空后自动把所有强制必填项重新设为选中，同时同步双向绑定的selectedOptions数据即可：

DeSelectionAll() {
  // 清空现有所有选中状态
  this.selectedColumns.selectedOptions.clear();
  // 遍历列表选项，恢复必填项的选中状态
  this.singleNodeColumns.forEach(column => {
    if (column.template.Mandatory) {
      // 找到对应的列表选项实例设置选中
      const mandatoryOption = this.selectedColumns.options.find(
        opt => opt.value === column.template
      );
      if (mandatoryOption) {
        mandatoryOption.selected = true;
      }
      // 同步ngModel绑定的数据源，保证数据和视图一致
      if (!this.selectedOptions.includes(column.template)) {
        this.selectedOptions.push(column.template);
      }
    }
  });
}

逻辑说明 #

• 先执行原有清空逻辑，取消所有非必填项的选中状态
• 遍历数据源中所有标记为Mandatory的必填项，找到对应的列表选项手动设置为选中
• 同步更新双向绑定的selectedOptions数组，避免视图和绑定数据不一致的问题
• 因为必填项本身设置了[disabled]="true"，用户无法手动取消选中，搭配全不选方法里的状态恢复逻辑，就能保证这类选项始终保持选中。

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