根据复选框列表中的条件过滤ngx-datatable

<!-- 复选框列表 -->
<div>
  <label>
    <input type="checkbox" [(ngModel)]="filterOptions.option1"> Option 1
  </label>
  <label>
    <input type="checkbox" [(ngModel)]="filterOptions.option2"> Option 2
  </label>
  <label>
    <input type="checkbox" [(ngModel)]="filterOptions.option3"> Option 3
  </label>
</div>

<!-- ngx-datatable -->
<ngx-datatable [rows]="filteredData">
  <!-- 表格列定义 -->
  <ngx-datatable-column name="Column 1" prop="column1"></ngx-datatable-column>
  <ngx-datatable-column name="Column 2" prop="column2"></ngx-datatable-column>
  <ngx-datatable-column name="Column 3" prop="column3"></ngx-datatable-column>
</ngx-datatable>

// 组件代码
import { Component } from '@angular/core';

@Component({
  selector: 'app-datatable',
  templateUrl: './datatable.component.html',
  styleUrls: ['./datatable.component.css']
})
export class DatatableComponent {
  data = [
    { column1: 'Value 1', column2: 'Value 2', column3: 'Value 3' },
    // 更多数据...
  ];

  filteredData = this.data; // 初始时显示所有数据

  filterOptions = {
    option1: false,
    option2: false,
    option3: false
  };

  // 监听条件变化，触发过滤函数
  onFilterChange() {
    this.filteredData = this.data.filter(item => {
      // 根据条件过滤数据
      return (
        (!this.filterOptions.option1 || item.column1 === 'Value 1') &&
        (!this.filterOptions.option2 || item.column2 === 'Value 2') &&
        (!this.filterOptions.option3 || item.column3 === 'Value 3')
      );
    });
  }
}