Angular 根据选定的下拉列表显示垫表

我正试图根据我的Mat select下拉选择值（从服务获取值）填充Material表（数据来自Json-Service）

请在下面找到我的代码

      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());
      // }

    }

---

请让我知道我犯了什么错误

我认为应该是

this.countryTableDisplay.data=this.cacheFullData.data.filter（（item）=>item.CountryName==filterVal）；}

countryTableDisplay和

cacheFullData

都是mat表，您需要在

matTable.data

property@AshotAleqsanyan谢谢你的回复，但我这里有一个问题，实际上我只有一张桌子，但我可以只带一张垫子桌子吗正确理解你的问题。您可以使用一个表并更改

列以显示
dinamically@AshotAleqsanyan我就快到了，我在控制台中获得了价值，但当我从下拉列表中选择国家时，当我单击查看按钮时，数据没有显示在表中，您能帮助我吗
           <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>

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.