0

我想为一个列和一个日期范围过滤一个角度材料表。单列和日期工作正常，但目前我无法应用日期范围。

这是工作过滤器的 html。

<input matInput
            (keypress)="keyPressNumericWithCharacters($event)"
            formControlName="cinemaRelease"
            [matDatepicker]="picker"
            (dateInput)="applyFilter()">
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>

<table mat-table [dataSource]="dataSource" matSort  (matSortChange)="sortData($event)" class="mat-elevation-z0">
        <!-- Titel Column -->
        <ng-container matColumnDef="title">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Filmtitel </th>
          <td mat-cell *matCellDef="let row"> {{row.title}} </td>
        </ng-container>
        <!-- Kinostart Column -->
        <ng-container matColumnDef="cinemaRelease">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Kinostart </th>
          <td mat-cell *matCellDef="let row"> {{ row.cinemaRelease | date: 'dd.MM.YYYY'}} </td>
        </ng-container>
       
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>

在我的组件中：

applyFilter() {
const date = this.datePipe.transform(this.searchForm.get('cinemaRelease')!.value, 'dd.MM.yyyy');

const mt = this.searchForm.get('movieTitle')!.value;
this.cinemaRelease = (date === null || date === '') ? '' : date.toString();

this.movieTitle = mt === null ? '' : mt;

const filterValue = this.cinemaRelease + '$' + this.movieTitle;

this.dataSource.filter = filterValue.trim().toLowerCase();}



 getFilterPredicate() {
return (row: Movie, filters: string) => {

  const filterArray = filters.split('$');
  const cinemaRelease = filterArray[0];
  const movieTitle = filterArray[2];

  const matchFilter = [];

  let columnCinemaRelease = '';
  let columnMovieTitle = '';

  if (row.cinemaRelease === null){
    columnMovieTitle = row.title;
  }
  else {
    columnCinemaRelease =  this.datePipe.transform(row.cinemaRelease, 'dd.MM.yyyy')?.toString()!;
    columnMovieTitle = row.title;
  }

  const customFilterCR = columnCinemaRelease!.toString().toLowerCase().includes(cinemaRelease);

  matchFilter.push(customFilterCR);
  matchFilter.push(customFilterMT);

  return matchFilter.every(Boolean);
};}

任何提示或帮助都会很棒。泰

*编辑：将 mat-table 添加到 html

4

0 回答 0