Angular 2动态表格如何为每列单独添加全选功能？

嘿，我来帮你搞定这个每列全选的需求！基于你提供的Angular表格代码，咱们可以通过修改HTML结构+添加组件逻辑的方式实现，具体步骤如下：

1. 调整表格HTML结构 #

首先，咱们要在每列的表头里添加全选复选框，同时给表格的每个数据单元格加上对应列的选择框，绑定到对应的选中状态：

<table [ngClass]="{'isDisplay': hasACLAccess}" class="responsive-table-input-matrix" id="matrixTable">
  <thead>
    <tr>
      <th>Features/Roles</th>
      <!-- 为每列表头添加全选复选框 -->
      <th *ngFor="let column of TableConfiguration.columns;">
        {{column.title}}
        <input 
          type="checkbox" 
          [(ngModel)]="column.isAllSelected" 
          (change)="toggleColumnAllSelection(column)"
          class="ml-2"
        >
      </th>
    </tr>
  </thead>
  <tbody *ngFor="let feature of featureNameList">
    <tr>
      <td>{{feature.name}}</td>
      <!-- 为每行的对应列添加选择框 -->
      <td *ngFor="let column of TableConfiguration.columns;">
        <input 
          type="checkbox" 
          [(ngModel)]="feature.selectedColumns[column.key]" 
          (change)="checkColumnAllSelected(column)"
        >
      </td>
    </tr>
  </tbody>
</table>

2. 完善组件逻辑（TypeScript） #

接下来要在你的组件里处理全选/取消全选的逻辑，以及同步单个选择框和全选框的状态：

首先，确保你的TableConfiguration.columns每个对象有key字段（用来唯一标识列，比如角色ID或权限码），同时初始化isAllSelected状态；另外给featureNameList里的每个feature添加selectedColumns对象来存储各列的选中状态。

import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms'; // 记得导入FormsModule，否则ngModel无法使用

// 假设你的列配置和feature类型定义
interface TableColumn {
  title: string;
  key: string; // 新增：唯一标识列的字段
  isAllSelected?: boolean; // 新增：全选状态
}

interface Feature {
  name: string;
  // 新增：存储各列的选中状态，key对应TableColumn的key
  selectedColumns: { [key: string]: boolean };
}

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  standalone: true,
  imports: [FormsModule] // 如果是独立组件，要导入FormsModule；否则在模块里导入
})
export class YourComponent implements OnInit {
  hasACLAccess = true;
  TableConfiguration: { columns: TableColumn[] } = {
    columns: [
      // 示例列配置，根据你的实际情况调整
      { title: '管理员', key: 'admin' },
      { title: '编辑', key: 'editor' },
      { title: '访客', key: 'guest' }
    ]
  };
  featureNameList: Feature[] = [
    // 示例feature数据，根据你的实际情况调整
    { name: '用户管理', selectedColumns: {} },
    { name: '内容发布', selectedColumns: {} },
    { name: '数据统计', selectedColumns: {} }
  ];

  ngOnInit(): void {
    // 初始化列的全选状态为false，同时初始化每个feature的选中状态
    this.TableConfiguration.columns.forEach(column => {
      column.isAllSelected = false;
      this.featureNameList.forEach(feature => {
        feature.selectedColumns[column.key] = false;
      });
    });
  }

  // 切换整列全选/取消全选
  toggleColumnAllSelection(column: TableColumn): void {
    this.featureNameList.forEach(feature => {
      feature.selectedColumns[column.key] = column.isAllSelected;
    });
  }

  // 检查列是否所有选项都被选中，更新全选框状态
  checkColumnAllSelected(column: TableColumn): void {
    const isAllSelected = this.featureNameList.every(
      feature => feature.selectedColumns[column.key]
    );
    column.isAllSelected = isAllSelected;
  }
}

3. 可选：添加样式优化 #

你可以给全选复选框加一点样式，让它和表头标题的排版更美观，比如：

.responsive-table-input-matrix th input[type="checkbox"] {
  margin-left: 8px;
  vertical-align: middle;
}

关键说明 #

• 确保导入FormsModule，否则[(ngModel)]无法正常工作（如果是Angular 14+的独立组件，在组件的imports里加；否则在对应的NgModule的imports里加）。
• TableColumn里的key字段要保证唯一，用来关联feature的选中状态，你可以根据自己的业务数据调整这个字段的名称和值。
• 如果你的featureNameList是从接口获取的，记得在数据加载完成后再执行初始化逻辑（比如放在subscribe的回调里）。

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