angular - angular material2 テーブルの特定の列でのフィルタリング

Question

私のAngularアプリには、下のグリッドをフィルタリングするために使用されるテキストボックスのあるhtmlページがあります。現在、検索はすべての列で行われているため、 IDとNameのみに制限したいと考えています。以下は、検索テキストボックスの html です。

 <mat-form-field class="example-full-width" shouldPlaceholderFloat="false">
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Please enter Name or ID number.">

            <!-- <input placeholder="Please enter Name or ID number." matInput #input (keyup)='searchElements(input.value)'> -->
        </mat-form-field>

以下はマテリアルテーブルコードです:

   <mat-table #table [dataSource]="dataSource" matSort fxFlex="60" class="">

                <ng-container matColumnDef="name">
                    <mat-header-cell *matHeaderCellDef mat-sort-header style="padding-left:10px"> Name </mat-header-cell>
                    <mat-cell *matCellDef="let element" style="padding-left:10px"> {{element.name}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="cdate">
                    <mat-header-cell *matHeaderCellDef mat-sort-header style="padding-left:10px"> Creation Date </mat-header-cell>
                    <mat-cell *matCellDef="let element" style="padding-left:10px"> {{element.cdate | date:'mediumDate'}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="createdby">
                    <mat-header-cell *matHeaderCellDef mat-sort-header style="padding-left:10px"> Created By </mat-header-cell>
                    <mat-cell *matCellDef="let element" style="padding-left:10px"> {{element.createdby}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="id">
                    <mat-header-cell *matHeaderCellDef mat-sort-header style="padding-left:10px"> ID </mat-header-cell>
                    <mat-cell *matCellDef="let element" style="padding-left:10px"> {{element.id}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="status">
                    <mat-header-cell *matHeaderCellDef mat-sort-header style="padding-left:10px"> Status </mat-header-cell>
                    <mat-cell actQuestionFunction style="padding-left:10px" [config]="{ lob : { Id: element.id ,'true': 'func1', 'false':' func2'} }" *matCellDef="let element"> {{element.sqldbinfo.status}} </mat-cell>
                </ng-container>

                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                <mat-row [routerLink]="['/overview', row.id]" (click)="setCurrent(row)" [queryParams]="{ name: row.name, Id: row.id }"  [ngClass]="{'hidden': (row.status == 'Submitted' && showSubmitted == false), 'submitted': row.status == 'Submitted'}" *matRowDef="let row; columns: displayedColumns  " ></mat-row>
            </mat-table>

typescriptファイルのkeyupイベントは以下に書かれています

  applyFilter(filterValue: string) {
         this.dataSource.filter = filterValue;
   }

これは以下の ts ファイルです

    import { Component, ViewChild, OnInit, AfterViewInit  } from 
                     '@angular/core';
import { MatTableDataSource, MatSort } from '@angular/material';
import { DataSource } from '@angular/cdk/collections';
import { CamsService } from '../services/cams.service';
import { ActauthService } from '../actauth.service';
import { LocalDataService } from '../services/local-data.service';
import { ActService } from '../services/act.service';
import { ActModalService } from '../act-modal/act-modal-service.service';

@Component({
  selector: 'app-camslist',
  templateUrl: './camslist.component.html',
  styleUrls: ['./camslist.component.less']
})
export class CamslistComponent implements OnInit {

  displayedColumns = ['name', 'cdate', 'createdby', 'camsid', 'status'];
  dataSource;
  StatusText: Array<string>;
  SubmittedButtonShowHide: Boolean;
  constructor(
              private camsService: CamsService,
              private auth: ActauthService,
              private localDataService: LocalDataService,
              private actService: ActService,
              private modalService: ActModalService) {

  }
  @ViewChild(MatSort) sort: MatSort;
  showSubmitted: Boolean = false;
  ngOnInit() {
    this.auth.getMyLogon().subscribe(
      res => {
        res.EmployeeId = 29007154;
        this.camsService.all(res).subscribe(
          cams => {
            if (cams.length === 0) {
              this.modalService.openNoCamsIdMsgModal();
            } else {
                  this.dataSource = new MatTableDataSource(cams);
                  setTimeout(() => this.dataSource.sort = this.sort);
           }
          });
      });
  }

  // ngAfterViewInit() {
  //   setTimeout(() => this.dataSource.sort = this.sort);

  // }
  applyFilter(filterValue: string) {
    // this.dataSource.filter = filterValue;

    this.dataSource.filterPredicate = function(data, filter: string): 
 boolean {
      return data.name.toLowerCase().includes(filter) || 
     data.camsid.toLowerCase().includes(filter);

    };
  }
  toggleSubmitted() {
    this.showSubmitted = !this.showSubmitted;
  }

    export interface Element {
     name: string;
    cdate: string;
     createdby: string;
       id: number;
     status: string;

}`