Angular中如何获取矩阵表格内选中的复选框？

嘿，我来帮你搞定这个问题！在Angular里处理这种矩阵式的复选框表格，有几种优雅的方式，不用直接去扒DOM元素，下面给你一步步讲：

方法一：模板驱动表单（简单直观） #

这种方式适合小型表格，直接用ngModel绑定每个复选框的状态到组件里的二维数组，上手快。

第一步：修改你的HTML模板 #

给每个复选框绑定ngModel，同时给行和列加上索引，方便对应到数组位置：

<h1>Responsive table of input-checkbox-matrix type</h1>
<h3>Permissions Table</h3>
<form #permissionForm="ngForm">
  <table class="responsive-table-input-matrix">
    <thead>
      <tr>
        <th></th>
        <th>Owner</th>
        <th>Administrators</th>
        <th>Managers</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let permission of permissionsList; let rowIndex = index">
        <td>{{ permission }}</td>
        <td><input type="checkbox" [(ngModel)]="permissionMatrix[rowIndex][0]" name="perm-{{rowIndex}}-0"></td>
        <td><input type="checkbox" [(ngModel)]="permissionMatrix[rowIndex][1]" name="perm-{{rowIndex}}-1"></td>
        <td><input type="checkbox" [(ngModel)]="permissionMatrix[rowIndex][2]" name="perm-{{rowIndex}}-2"></td>
      </tr>
    </tbody>
  </table>
  <button (click)="getSelectedPermissions()">获取选中项</button>
</form>

第二步：在组件类里初始化数据和方法 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-permission-table',
  templateUrl: './permission-table.component.html',
  styleUrls: ['./permission-table.component.css']
})
export class PermissionTableComponent {
  // 对应表格行的权限操作列表
  permissionsList = ['Add', 'Edit', 'Delete', 'View'];
  // 二维数组存储复选框状态：行=操作，列=角色
  permissionMatrix: boolean[][] = [];

  ngOnInit() {
    // 初始化矩阵，默认全未选中
    this.permissionMatrix = this.permissionsList.map(() => [false, false, false]);
  }

  getSelectedPermissions() {
    const selected: { permission: string; role: string }[] = [];
    const roles = ['Owner', 'Administrators', 'Managers'];
    
    this.permissionMatrix.forEach((row, rowIndex) => {
      row.forEach((isChecked, colIndex) => {
        if (isChecked) {
          selected.push({
            permission: this.permissionsList[rowIndex],
            role: roles[colIndex]
          });
        }
      });
    });

    console.log('选中的权限组合：', selected);
    // 这里可以把selected数据用于提交后台等后续操作
  }
}

方法二：响应式表单（适合复杂场景） #

如果你的表格需要动态增减行/列、做表单验证，响应式表单会更灵活可控。

第一步：修改HTML模板 #

<h1>Responsive table of input-checkbox-matrix type</h1>
<h3>Permissions Table</h3>
<form [formGroup]="permissionForm">
  <table class="responsive-table-input-matrix">
    <thead>
      <tr>
        <th></th>
        <th>Owner</th>
        <th>Administrators</th>
        <th>Managers</th>
      </tr>
    </thead>
    <tbody formArrayName="permissionRows">
      <tr *ngFor="let row of permissionRows.controls; let rowIndex = index" [formGroupName]="rowIndex">
        <td>{{ permissionsList[rowIndex] }}</td>
        <td><input type="checkbox" formControlName="0"></td>
        <td><input type="checkbox" formControlName="1"></td>
        <td><input type="checkbox" formControlName="2"></td>
      </tr>
    </tbody>
  </table>
  <button (click)="getSelectedPermissions()">获取选中项</button>
</form>

第二步：组件类代码 #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormArray, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-permission-table',
  templateUrl: './permission-table.component.html',
  styleUrls: ['./permission-table.component.css']
})
export class PermissionTableComponent implements OnInit {
  permissionForm!: FormGroup;
  permissionsList = ['Add', 'Edit', 'Delete', 'View'];
  roles = ['Owner', 'Administrators', 'Managers'];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    // 构建表单：每个行是一个FormArray，包含3个FormControl对应三个角色
    this.permissionForm = this.fb.group({
      permissionRows: this.fb.array(
        this.permissionsList.map(() => this.fb.array([false, false, false]))
      )
    });
  }

  // 快捷获取表单数组
  get permissionRows() {
    return this.permissionForm.get('permissionRows') as FormArray;
  }

  getSelectedPermissions() {
    const selected: { permission: string; role: string }[] = [];
    
    this.permissionRows.controls.forEach((rowForm, rowIndex) => {
      (rowForm as FormArray).controls.forEach((control, colIndex) => {
        if (control.value) {
          selected.push({
            permission: this.permissionsList[rowIndex],
            role: this.roles[colIndex]
          });
        }
      });
    });

    console.log('选中的权限组合：', selected);
    // 后续处理逻辑
  }
}

小提醒 #

尽量别直接用document.querySelectorAll这类DOM操作去选复选框，Angular的表单机制更符合框架设计理念，代码也更容易维护。如果你的表格是动态生成的（比如角色或操作数量不固定），可以在组件里动态构建permissionsList和角色列表，自动生成表格行和列就行。

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