过滤角材料

Question

我是这个角度的新手，我做了一张学生表。我的问题是我想按年份过滤，然后，我需要按用户名或 LRN（学习者参考编号）过滤它。如果我单独过滤，我的所有代码都运行良好，但是当我尝试按年份过滤然后按用户名过滤时，它不起作用。

all-students-component.ts

    filterFullName(value: string): void {
        this.dataSource.filter = value.trim().toLocaleLowerCase();
        this.dataSource.filterPredicate = function (data, filter: string): boolean {
          return data.fullName.toLocaleLowerCase().includes(filter)
        }
    }

    filterLrn(value: string): void {
        this.dataSource.filter = value.trim().toLocaleLowerCase();
        this.dataSource.filterPredicate = function (data, filter: string): boolean {
         return data.lrn.toLocaleLowerCase().includes(filter);
        }
    }

    filterYear(value: string): void {
       this.dataSource.filter = value.trim().toLocaleLowerCase();
       this.dataSource.filterPredicate = function (data, filter: string): boolean {
        return data.date.toLocaleLowerCase().includes(filter)
       }
    }

all-students-component.html

    <div>
     <mat-form-field>
        <mat-label>Search by {{typeSearch}}</mat-label>
        <input type="number" matInput autocomplete="off" *ngIf='lrn === true' (click)='lrn = true'
            [(ngModel)]="searchLrn" (keyup)="filterLrn($event.target.value)">
        <input type="text" matInput autocomplete="off" *ngIf='lrn === false' [(ngModel)]="fullName"
            (keyup)="filterFullName($event.target.value)">
        <mat-hint align="end">Search using LRN or Name</mat-hint>
    </mat-form-field>

    <button mat-button [matMenuTriggerFor]="menu" class='menuIcon'>
        <mat-icon>keyboard_arrow_down</mat-icon>
    </button>

    <mat-menu #menu="matMenu">
        <button mat-menu-item (click)=' typeSearch = "LRN"; lrn= true '>LRN</button>
        <button mat-menu-item (click)=' typeSearch = "Name (Last Name, First name)"; lrn= false '>Name</button>
    </mat-menu>

    <mat-form-field>
        <mat-label>Search by Year</mat-label>
        <input type="text" matInput autocomplete="off" [(ngModel)]="date"
            (keyup)="filterYear($event.target.value)">
     </mat-form-field>
    </div>