Angular 根据下拉值（JSON POST requst）更改mat表详细信息

需要从下拉列表中的角度了解HTTP客户机post请求的帮助吗？如果我选择了必须使用post方法将请求发送到服务器的任何国家，数据将显示在Mat表中

目前发生的情况是，我只有其他国家的BEL国家数据，我没有，但如果我当时选择了其他国家，它也会显示BEL国家数据

这是我的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.countryCode">
                {{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 IBT Institution Name" >
            <mat-icon matPrefix>search</mat-icon>
        </mat-form-field> 
    </div>
</div>
<div class="row">
    <div style="width: 50%;float:left">
        <table  *ngIf="dataSource?.data?.length > 0" mat-table [dataSource]="dataSource" > 
            <!-- Site Number -->
            <ng-container matColumnDef="site">
                <th mat-header-cell *matHeaderCellDef > Site </th>
                <td mat-cell class="mat-cell" *matCellDef="let element"> {{element.siteNumber}}
                </td>
            </ng-container>
            <!-- IBT Details -->
            <ng-container matColumnDef="ibtInstitutionNamePIName">
                <th mat-header-cell *matHeaderCellDef > IBT - Institution Name / PI Name </th>
                <td mat-cell class="mat-cell" *matCellDef="let element"> {{element.ibtInstitutionName}} / {{element.ibtInvestigatorFullName}}                            
                </td>
            </ng-container>
            <ng-container matColumnDef="action">
                <th mat-header-cell *matHeaderCellDef></th>
                <td mat-cell class="mat-cell" *matCellDef="let element">
                    <a (click)="openDialog('selectCtms',element)"><span class="icon"><i class="fas fa-link"></i></span></a>
                </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="columnsToDisplay;"></tr>
            <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
        </table >
    </div>
    <div style="width: 50%;float:right">
            <table *ngIf="dataSource1?.data?.length > 0" mat-table [dataSource]="dataSource1">
                <!--CTMS Details -->
                <ng-container matColumnDef="ctmsInstitutionNamePIName">
                    <th mat-header-cell *matHeaderCellDef> CTMS - Institution Name / PI Name</th>
                    <td mat-cell class="mat-cell" *matCellDef="let element">
                         <span *ngIf="!ctmsMatch">Match Sites</span>
                         <span *ngIf="ctmsMatch">{{element.ctmsInstitutionName}} / {{element.ctmsInvestigatorFullName}}</span>
                    </td>  
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="columnCTMStoDiplay;"></tr>
                <tr mat-row *matRowDef="let row; columns: columnCTMStoDiplay;"></tr>
            </table> 
    </div>
</div>

请让我知道我做错了什么

---

提前感谢

如果您试图发送post请求并更新该数据源当您更改下拉列表中的选项时，您可以调用函数发送post请求并更新该数据源

在更改“角度”中的下拉项时调用函数

在HTML中添加下拉选择更改事件

<mat-select [(ngModel)]="selectedValue" name="countryList" (selectionChange)='updateData()'>
    <mat-option *ngFor="let country of countryList" [value]="country.countryCode">
                {{country.countryName}}
    </mat-option>
</mat-select>

---

@Chandran感谢您在从下拉列表中选择值并单击查看按钮后的回复，post请求必须发送

    {
  "bcNumber": "50209-01",
  "countryCode": "BEL  ",
},
{
  "bcNumber": "50209-01",
  "countryCode": "BEL  ",
  "statusFlag": "I"
},

<mat-select [(ngModel)]="selectedValue" name="countryList" (selectionChange)='updateData()'>
    <mat-option *ngFor="let country of countryList" [value]="country.countryCode">
                {{country.countryName}}
    </mat-option>
</mat-select>

updateData(){
    // your post api call to fetch data 
    // assigin the response data to your datasource
}