Angular中如何获取mat-checkbox多选的所有选中对象并组成数组

• 第一步：在组件属性声明区域新增选中项存储数组

// 新增属性，用于存储用户勾选的子租户数据
selectedCurrentSubtenants: {subtenantName: string, currentLeaseExpiration: string}[] = [];

• 第二步：修改HTML中mat-checkbox的绑定逻辑，原所有复选框绑定同一个ngModel的写法不符合多选场景，替换为选中状态判断

<mat-checkbox
 color="primary"
 [checked]="selectedCurrentSubtenants.some(item => item.subtenantName === subtenant.subtenantName)"
 (change)="changeCurrentSubtenants($event,subtenant)"
 style="margin-left:10px;">
 <div class="deal-text-label">
   {{subtenant.subtenantName}}
</div>
</mat-checkbox>

注：如果子租户数据有唯一id字段，建议用id替代上面的subtenantName做匹配判断，准确率更高

• 第三步：修改changeCurrentSubtenants的业务逻辑，实现勾选添加、取消勾选删除的能力

changeCurrentSubtenants(e:any,rowData:any){    
    if(e.checked){
      // 勾选时判断是否已存在，避免重复添加
      const existIndex = this.selectedCurrentSubtenants.findIndex(item => item.subtenantName === rowData.subtenantName);
      if(existIndex < 0) {
        this.selectedCurrentSubtenants.push({
          subtenantName: rowData.subtenantName,
          currentLeaseExpiration: rowData.currentLeaseExpiration
        });
      }
    } else {
      // 取消勾选时移除对应数据
      this.selectedCurrentSubtenants = this.selectedCurrentSubtenants.filter(item => item.subtenantName !== rowData.subtenantName);
    }
    // selectedCurrentSubtenants 就是你需要的最终选中数组
    console.log('已选中子租户：', this.selectedCurrentSubtenants);
}

如果你需要把选中结果同步到表单字段中，可在上述方法最后补充：

this.dealDispositionFormFields.currentSubtenants = this.selectedCurrentSubtenants;

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