отображать таблицу матов на основе выбранного раскрывающегося списка

Question

Я пытаюсь заполнить таблицу Материал (данные поступают для Json - Сервис) на основе выбранного значения моего выбора циновки (получение значения из Сервиса).

Пожалуйста, найдите мой код ниже

      export class MatchSiteComponent implements OnInit {

      data:any;
      matchSiteTitle:String = 'Match Site';
      matchSiteSubTitle:String = 'Match IBT sites with CTMS site';
      private unsubscribe: Subscription[] = [];
      public idnumber:any;

      countryList: Array<any>=[];


      applyFilter(filterValue: string) {
        this.countryTableDisplay.filter = filterValue.trim().toLowerCase();
        // console.log(this.dataSource.filter);
      }

      // public dataSource = new MatTableDataSource<MatchSite>([]);
      public dataSourceCountry = new MatTableDataSource<CountryMatch>([]);
      public columnsToDisplay: string[] = ['site', 'firstName', 'lastName'];
      public countryTableDisplay = new MatTableDataSource<MatchSite>([]);
      public cacheFullData =new MatTableDataSource<MatchSite>([]);
      constructor(private route: ActivatedRoute, private dataService: DataService,  private router: Router) {

       }

      ngOnInit() {
        const routerSubscription = this.route.paramMap.subscribe(paramMap => {
          this.idnumber = paramMap.get('idnumber');
          //console.log(this.idnumber);
        });

        // populate Country details in drop down
        this.unsubscribe.push(routerSubscription);
          const countryListData = this.dataService.getcountryMatchDetails(this.idnumber).subscribe(data => {  
          this.dataSourceCountry = new MatTableDataSource<CountryMatch>(data);
          this.countryList = data;  
          //console.log(this.countryList);
      }); 

      //data getting from service to the table
        this.unsubscribe.push(countryListData);
        const matchSubscription = this.dataService.getmatchsiteDetails().subscribe(response => {  
        // this.countryTableDisplay = new MatTableDataSource<MatchSite>(response);    
        this.cacheFullData = new MatTableDataSource<MatchSite>(response);
        console.log(this.cacheFullData);
    }); 
      this.unsubscribe.push(matchSubscription);
      }

      navigateToMatchSite(row){
        this.router.navigate(['site', row.idnumber]);
      }

      displayTable(filterVal: any){
        if (filterVal == "0")
            this.countryTableDisplay = this.cacheFullData;
            else
                this.countryTableDisplay = this.cacheFullData.filter((item) => item.CountryName == filterVal);
      }

      // ngOnDestroy() { 
      //   this.unsubscribe.forEach(sb => sb.unsubscribe());
      // }

    }

HTML Код

           <div class="row greybg">
            <div class="col col-md-2">            
                <mat-form-field>
                    <mat-label>Select Country</mat-label>
                    <mat-select [(ngModel)]="selectedValue" name="countryList">
                      <mat-option *ngFor="let country of countryList" [value]="country.countryName">
                        {{country.countryName}}
                      </mat-option>
                    </mat-select>
                  </mat-form-field>
            </div>
            <div class="col col-md-7" style="margin-left:25px;">
                <button style="margin-top:5px;" type="button" class="btn" (click)="displayTable()">View</button>
            </div>
            <div class="col col-md-2">
                <mat-form-field >
                    <input  matInput (keyup)="applyFilter($event.target.value)" type ="text" placeholder="Search by Country" >
                    <mat-icon matPrefix>search</mat-icon>
                </mat-form-field> 
            </div>
        </div>
        <div class="row">
            <table  mat-table [dataSource]="dataSource" [style.display]="'none'"> 
                <!-- Site Number -->
                <ng-container matColumnDef="site">
                    <th mat-header-cell *matHeaderCellDef > Site </th>
                    <td mat-cell *matCellDef="let element"> {{element.Site}}
                    </td>
                </ng-container>
                <!-- IBT Details -->
                <ng-container matColumnDef="firstName">
                    <th mat-header-cell *matHeaderCellDef > First Name </th>
                    <td mat-cell *matCellDef="let element"> {{element.IBTInstitutionName}} / {{element.IBTPIName}}
                    </td>
                </ng-container>
                <!-- CTMS Details -->
                <ng-container matColumnDef="lastName">
                    <th mat-header-cell *matHeaderCellDef> Last Name</th>
                    <td mat-cell *matCellDef="let element"> {{element.CTMSInstitutionName}} / {{element.CTMSPIName}}
                    </td> 
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="columnsToDisplay;"></tr>
                <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
            </table>
        </div>

Я получаю ошибку в методе displayTable .filter

this.countryTableDisplay = this.cacheFullData.filter((item) => item.CountryName == filterVal);}

Filter term that should be used to filter out objects from the data array. To override how data objects match to this filter string, provide a custom function for filterPredicate.
 This expression is not callable.
   Type 'String' has no call signatures.

Пожалуйста, дайте мне знать, что я делаю ошибку