如何使用复选框过滤角度7中的简单表格

Question

我正在尝试使用复选框来过滤我的表格。 我确实使用引导MDB，这是一张普通表。

我认为我在正确的位置上，我不知道复选框或表格在做什么：

这是我的桌子：

<table  mdbTable striped="true" [hidden]="!show" >
  <thead>
    <tr>
      <th *ngFor="let head of tableColumn" scope="col">{{head}} </th>
    </tr>
  </thead>
  <tbody>
    <tr mdbTableCol *ngFor="let data of dataSourceFilterd | paginate: { id: 'listing_pagination', itemsPerPage: 10, currentPage: p, totalItems: totalPage }"  >
      <th scope="row">{{data.AITOR}}</th>
      <td>{{data.SOG_MCOLH}}</td>
      <td>{{data.GOBH_MCOLH}}</td>
      <td>{{data.AORKH_MCOLH}}</td>
      <td>{{data.MCOLH_N7}}</td>
      <td>{{data.MCOLH_AAAA}}</td>
      <td>{{data.TAOR_QTSR_EBRI}}</td>
      <td>{{data.QOD_MCHSN}}</td>
      <td>{{data.STTOS_RASHI_4_1}}</td>
      <td>{{data.LQOCH_SHM_MQOTSR_EBRI}}</td>
      <td>{{data.LQOCH_SHM_LOEZI_QTSR}}</td>
      <td>{{data.LQOCH_QOD_LQOCH}}</td>
    </tr>
  </tbody>
</table>

这是复选框：

<input type="checkbox" [(ngModel)]="filter.OT" (ngModelChange)="filterChange()" />OT<br>

这是组件：

import { Component, OnInit, ViewChild} from '@angular/core';
import { MarinServiceService } from 'src/app/services/marin-service.service';

@Component({
  selector: 'app-containers-page',
  templateUrl: './containers-page.component.html',
  styleUrls: ['./containers-page.component.scss']
})
export class ContainersPageComponent implements OnInit {

  tableColumn = ['AITOR', 'SOG_MCOLH', 'GOBH_MCOLH', 'AORKH_MCOLH', 'MCOLH_N7', 'MCOLH_AAAA', 'TAOR_QTSR_EBRI', 'QOD_MCHSN', 'STTOS_RASHI_4_1', 'LQOCH_SHM_MQOTSR_EBRI', 'LQOCH_SHM_LOEZI_QTSR', 'LQOCH_QOD_LQOCH'];

  RG: any;
  p: number = 1;
  dataSource: any = [];
  totalPage: number;
  public show: boolean = false;
  public tableHide: any = 'Show';
  searchText: string = "";
  total: any;
  dataSourceFilterd: any = [];
  filter = {
    RG: true,
    OT: true,
    HC: true
  };

  constructor(private marinService: MarinServiceService) {}

  ngOnInit() {
    this.marinService.getAllContainers().subscribe((result) => {
      this.dataSource = result;
      this.total = this.dataSource.length;
      this.dataSourceFilterd = this.dataSource;
    })
  }

  toggle() {
    this.show = !this.show;

    if (this.show) {
      this.tableHide = "Hide";
    } else {
      this.tableHide = "Show";
    }
  }

  public doFilter = (value: string) => {
    this.dataSource.filter = value.trim().toLocaleLowerCase();
  }

  public getRowsValue(flag) {
    if (flag === null) {
      return this.dataSource.length;
    } else {
      return this.dataSource.filter(i => (i.state == flag)).length;
    }
  }

  filterChange() {
    this.dataSourceFilterd = this.dataSource.filter(x =>
      (x.category === 'RG' && this.filter.RG) ||
      (x.category === 'OT' && this.filter.OT) ||
      (x.category === 'HC' && this.filter.HC)
    );
  }
}

我尝试将复选框移到表格中-不起作用。 我尝试更改复选框的输入-无效。