Как отфильтровать указанный столбец c в dataTable angular

Question

Мне нужно сделать мой фильтр DataTable столбцом с указанием c, используя первый вход, например, для фильтрации таблицы по роли, которую пользователь должен вставить r / или r, а затем строку фильтрации. Я не знаю, как я могу сделать это в Angular.

Если вы не знаете, как именно я могу это сделать, мне просто нужно знать, как фильтровать указанный столбец c только один .

Мой текущий код:

Мой HTML файл:

<div class="mat">
                <div class="tableone">
                    <div class="search-div">
                        <button mat-raised-button>
                            <mat-icon>add</mat-icon>Create
                        </button>
                        <mat-form-field class="search-form-field">
                            <input type="text" matInput [(ngModel)]="searchkey" placeholder="Filtrer" autocomplete="off"
                                (keyup)="applyfilter()">
                            <button mat-button matSuffix mat-icon-button aria-label="Clear" *ngIf="searchkey"
                                (click)="onfilterClear()">
                                <i class="fa fa-close"></i>
                            </button>
                        </mat-form-field>
                    </div>
                    <div class="mat-elevation-z8">
                        <mat-table [dataSource]="listdata" matSort>
                            <ng-container matColumnDef="Role">
                                <mat-header-cell *matHeaderCellDef mat-sort-header>Role</mat-header-cell>
                                <mat-cell *matCellDef="let element">{{element.Role}}</mat-cell>
                            </ng-container>
                            <ng-container matColumnDef="Email">
                                <mat-header-cell *matHeaderCellDef mat-sort-header>Email</mat-header-cell>
                                <mat-cell *matCellDef="let element">{{element.email}}</mat-cell>
                            </ng-container>
                            <ng-container matColumnDef="Fullname">
                                <mat-header-cell *matHeaderCellDef mat-sort-header>Fullname</mat-header-cell>
                                <mat-cell *matCellDef="let element">{{element.Fname}}</mat-cell>
                            </ng-container>
                            <ng-container matColumnDef="CIN">
                                <mat-header-cell *matHeaderCellDef mat-sort-header>CIN</mat-header-cell>
                                <mat-cell *matCellDef="let element">{{element.CIN}}</mat-cell>
                            </ng-container>
                            <ng-container matColumnDef="Age">
                                <mat-header-cell *matHeaderCellDef mat-sort-header>Age</mat-header-cell>
                                <mat-cell *matCellDef="let element">{{element.age}}</mat-cell>
                            </ng-container>
                            <ng-container matColumnDef="actions">
                                <mat-header-cell *matHeaderCellDef></mat-header-cell>
                                <mat-cell *matCellDef="let row">
                                    <button mat-icon-button>
                                        <div class="tooltip">
                                            <mat-icon>create</mat-icon><span class="tooltiptxt">Éditer</span>
                                        </div>
                                    </button>
                                    <button mat-icon-button color="warn" class="sup">
                                        <div class="tot">
                                            <mat-icon>delete_outline</mat-icon><span class="tottxt">Supprimer</span>
                                        </div>
                                    </button>
                                </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 [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="5"></mat-paginator>
                    </div>
                </div>
            </div> 

мой component.ts:

fake_arr: fake[] = [];
  displayedColumns: string[] = ['Role','Email','Fullname','CIN','Age','actions'];
  listdata: MatTableDataSource<any>;  
 @ViewChild(MatSort, { static: true }) sort: MatSort;//{ static: true }
  @ViewChild(MatPaginator,null) paginator: MatPaginator;
  searchkey: string;
 ngOnInit() {
    this.service.getUsers().subscribe((arr: fake[])=>{
      arr.forEach(element => {
         console.log(element); 
      });
      this.listdata = new MatTableDataSource(arr);
      this.listdata.sort = this.sort;
      this.listdata.paginator = this.paginator;
  });
 }
 onfilterClear(){
  this.searchkey = "";
}
applyfilter(){
  this.listdata.filter = this.searchkey.trim().toLowerCase();
}