带有复选框Angular的Fiter表

我有一个包含数据的表，我需要使用复选框进行过滤 .

这是我的组件的html：

<div><mat-checkbox  [(ngModel)]="pending">Pending</mat-checkbox></div>
   <div><mat-checkbox  [(ngModel)]="approved">Approved</mat-checkbox></div>
   <div><mat-checkbox  [(ngModel)]="rejected">Rejected</mat-checkbox></div>

<mat-table #table [dataSource]="dataSource">

  <ng-container matColumnDef="PaymentDate">
    <mat-header-cell *matHeaderCellDef> PaymentDate </mat-header-cell>
    <mat-cell *matCellDef="let payment"> {{payment.PaymentDate | date: 'dd/MM/yyyy HH:MM'}}  </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Amount">
    <mat-header-cell *matHeaderCellDef> Amount </mat-header-cell>
    <mat-cell *matCellDef="let payment"> {{payment.Amount}} {{payment.Currency}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="StatusDescription">
    <mat-header-cell *matHeaderCellDef> StatusDescription </mat-header-cell>
    <mat-cell *matCellDef="let payment"  [ngClass]="{'red-color' : payment.StatusDescription == 'Pending' || 'Rejected', 'green-color' : payment.StatusDescription == 'Approved'}"> {{payment.StatusDescription}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="Reason">
    <mat-header-cell *matHeaderCellDef> Reason </mat-header-cell>
    <mat-cell *matCellDef="let payment"> {{payment.Reason}} </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator [length]="5" [pageSize]="5" [pageSizeOptions]="[5, 10, 25]">
</mat-paginator>

我创建了代码来显示来自模拟数据的数据 .

这是将数据传递给表的组件代码 . 我需要根据复选框过滤它 . 例如，如果我单击被拒绝的复选框，我只需要查看 payment.StatusDescription == Rejected 行 .

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import {MatTableDataSource, MatPaginator} from '@angular/material';
import { PAYMENTS } from "./payments-mock";


@Component({
  selector: 'app-payments',
  templateUrl: './payments.component.html',
  styleUrls: ['./payments.component.scss']
})
export class PaymentsComponent implements AfterViewInit {

  pending = false;
  approved = false;
  rejected = false;


  displayedColumns = ['PaymentDate','Amount','StatusDescription','Reason'];
  dataSource = new MatTableDataSource(PAYMENTS);


  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
  }

}

这是模拟数据：

import { Payment } from "./payment";

export const PAYMENTS : Payment [] =  [
    {
    'Id': 832321,
    'AccountHolderId': '15651',
    'AccountHolderName': 'Alex Dumsky',
    'PaymentDate': new Date('2015-01-23T18:25:43.511Z'),
    'Amount': 445.12,
    'Currency': 'UAH',
    'Status': 0,
    'StatusDescription': 'Pending',
    'Reason': null
    },
    {
    'Id': 806532,
    'AccountHolderId': '46556',
    'AccountHolderName': 'Dudi Elias',
    'PaymentDate': new Date('2015-02-10T18:25:43.511Z'),
    'Amount': 4511.12,
    'Currency': 'EUR',
    'Status': 0,
    'StatusDescription': 'Pending',
    'Reason': null
    },
    {
    'Id': 7845431,
    'AccountHolderId': '48481',
    'AccountHolderName': 'Niv Cohen',
    'PaymentDate': new Date('2015-04-01T18:25:43.511Z'),
    'Amount': 10.99,
    'Currency': 'USD',
    'Status': 1,
    'StatusDescription': 'Approved',
    'Reason': 'Good Person'
    }
];

我怎么能正确地做到这一点？

谢谢你的帮助 .