Angular中基于复选框的表格列筛选功能实现问询

要实现点击复选框后表格仅显示选中列的功能，需通过双向绑定复选框状态、动态渲染表格列来完成，以下是修改后的完整代码：

组件模板（HTML） #

<div class="column-wrapper">
  <ul>
    <li *ngFor="let columnName of columnData">
      <input 
        type="checkbox" 
        [(ngModel)]="selectedColumns[columnName]" 
        (change)="onColumnToggle()"
      >
      <p>{{columnName}}</p>
    </li>
  </ul>
</div>

<p-table 
  [value]="sampleData" 
  styleClass="p-datatable-gridlines p-datatable-sm" 
  [tableStyle]="{'min-width': '50rem'}"
>
  <ng-template pTemplate="header">
    <tr>
      <th *ngFor="let col of getVisibleColumns()">
        {{col}}
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-data>
    <tr>
      <td *ngFor="let col of getVisibleColumns()">
        {{data[col]}}
      </td>
    </tr>
  </ng-template>
</p-table>

组件类（TypeScript） #

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  // 表格列名集合，与表头一一对应
  columnData = ['passengerId', 'survived', 'Pclass', 'Name', 'Sex', 'Ticket'];
  // 存储每列的选中状态，默认全选
  selectedColumns: { [key: string]: boolean } = {};
  // 示例数据，替换为你的实际业务数据
  sampleData = [
    { passengerId: 1, survived: 0, Pclass: 3, Name: 'Braund, Mr. Owen Harris', Sex: 'male', Ticket: 'A/5 21171' },
    { passengerId: 2, survived: 1, Pclass: 1, Name: 'Cumings, Mrs. John Bradley', Sex: 'female', Ticket: 'PC 17599' }
  ];

  ngOnInit() {
    // 初始化默认选中所有列
    this.columnData.forEach(col => {
      this.selectedColumns[col] = true;
    });
  }

  // 过滤并返回当前可见的列
  getVisibleColumns() {
    return this.columnData.filter(col => this.selectedColumns[col]);
  }

  // 列切换触发的回调（可添加额外逻辑）
  onColumnToggle() {
    // 此处可添加列显示/隐藏后的业务处理
  }
}

关键修改说明 #

• 复选框通过[(ngModel)]双向绑定到selectedColumns对象，实时记录每列的选中状态
• 表格表头与表体使用*ngFor动态渲染，通过getVisibleColumns()方法过滤出选中的列
• 初始化时默认选中所有列，保证页面加载后表格显示全部内容
• 需确保所在Angular模块已导入FormsModule（因使用了ngModel指令）

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