Таблица Fiter с флажком Угловая

Question

У меня есть таблица с данными, которые мне нужно отфильтровать с помощью флажков.

Вот мой 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'
    }
];

Как я могу сделать это правильно?

Спасибо за помощь.

Answer 1

Вы можете использовать события, вызванные после установки флажка.Вот краткий пример:

mycomponent.component.html

  <div><mat-checkbox  (ngModelChange)="pendingModelChecked($event) 
[ngModel]="pending" >Pending</mat-checkbox></div>

<div><mat-checkbox  (ngModelChange)="approvedModelChecked($event) 
   [ngModel]="approved" >Pending</mat-checkbox></div>

mycomponent.component.ts

   ngOnInit() {
    ...
    this.dataSource.filterPredicate =
     (data, filter: string) => !filter || data.StatusDescription === filter;
   }
   pendingModelChecked(value) {
     const filter = value ? 'Pending' : null
     this.dataSource.filter = filter;
   }

   approvedModelChecked(value) {
     const filter = value ? 'Approved' : null
     this.dataSource.filter = filter;
   }