Angular Material复选框问题：将选中项值存入数组

问题原因 #

你碰到的类型错误，是因为dynamColumns.value返回的是包含所有表单控件键值对的对象，不是单个布尔值，直接拿它和true比较肯定会类型不兼容。

修复步骤 #

1. 修正表单控件名拼写（重要）

你的HTML里第一个复选框的formControlName写的是nome，但TS代码里表单组定义的是name，两者不一致会导致这个复选框无法正确绑定，先把HTML里的nome改成name：

<mat-checkbox color="primary" formControlName="name">Name</mat-checkbox>

2. 修改onSave方法筛选选中项

在TS文件的onSave方法里，通过遍历表单值的键值对，筛选出值为true的键，存入columns数组：

onSave() {
  // 断言表单值类型，确保每个值都是布尔型（初始化时设为false，不会为null）
  const formValues = this.dynamColumns.value as { [key: string]: boolean };
  
  // 筛选并收集选中的列名
  this.columns = Object.entries(formValues)
    .filter(([_, isChecked]) => isChecked)
    .map(([columnName]) => columnName);
  
  console.log('选中的列：', this.columns);
  // 这里可以添加保存逻辑，比如把columns传递给父组件或者存入本地存储
}

另一种简洁写法 #

如果觉得Object.entries麻烦，也可以用Object.keys实现：

onSave() {
  const formValues = this.dynamColumns.value as { [key: string]: boolean };
  this.columns = Object.keys(formValues).filter(key => formValues[key]);
}

这样处理后，点击Save按钮时，columns数组就会自动存入所有被选中的复选框对应的键名（比如name、surname）。

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