如何在初始加载时仅选中mat-checkbox中的部分选项？

你当前的问题在于用了单个布尔变量baseVersionChecked绑定所有复选框的checked状态，导致所有复选框共享同一个开关状态。要实现初始仅选中部分选项，需要给每个复选框单独维护选中状态，以下是具体方案：

方案1：用数组存储选中项（适合简单场景） #

组件代码（.ts） #

// 你的原始版本数组
BaseVersions = ['v1', 'v2', 'v3', 'v4', 'v5', 'v6', 'v7', 'v8', 'v9', 'v10'];
// 初始需要选中的版本，按需修改
selectedBaseVersions = ['v2', 'v5', 'v7'];

// 复选框状态变化时更新选中数组
selectBaseVersionsCheckbox(isChecked: boolean, base: string) {
  if (isChecked) {
    // 避免重复添加
    if (!this.selectedBaseVersions.includes(base)) {
      this.selectedBaseVersions.push(base);
    }
  } else {
    // 移除取消选中的项
    const index = this.selectedBaseVersions.indexOf(base);
    if (index !== -1) {
      this.selectedBaseVersions.splice(index, 1);
    }
  }
}

模板代码（.html） #

<div *ngFor="let base of BaseVersions">
  <mat-checkbox 
    (change)="selectBaseVersionsCheckbox($event.checked, base)" 
    [checked]="selectedBaseVersions.includes(base)">
    {{base}}
  </mat-checkbox>
</div>

方案2：用对象存储选中状态（适合性能要求更高的场景） #

如果版本数量较多，用对象存储状态的判断性能会比数组includes更好：

组件代码（.ts） #

BaseVersions = ['v1', 'v2', 'v3', 'v4', 'v5', 'v6', 'v7', 'v8', 'v9', 'v10'];
// 存储每个版本的选中状态
selectedBaseVersions: {[key: string]: boolean} = {};

ngOnInit() {
  // 初始化所有版本为未选中
  this.BaseVersions.forEach(base => {
    this.selectedBaseVersions[base] = false;
  });
  // 设置初始选中的版本
  const initiallySelected = ['v2', 'v5', 'v7'];
  initiallySelected.forEach(base => {
    this.selectedBaseVersions[base] = true;
  });
}

selectBaseVersionsCheckbox(isChecked: boolean, base: string) {
  this.selectedBaseVersions[base] = isChecked;
}

模板代码（.html） #

<div *ngFor="let base of BaseVersions">
  <mat-checkbox 
    [(checked)]="selectedBaseVersions[base]"
    (change)="selectBaseVersionsCheckbox($event.checked, base)">
    {{base}}
  </mat-checkbox>
</div>

两种方案的核心逻辑都是：让每个复选框的选中状态与自身的版本值绑定，而非共享同一个变量，这样就能精准控制初始选中的部分选项，同时后续的选中/取消操作也能独立维护状态。

内容的提问来源于stack exchange，提问作者S.D