时间戳

首页 > 解决方案 > 根据下拉值更改垫表详细信息（JSON POST 请求）

angular - 根据下拉值更改垫表详细信息（JSON POST 请求）

问题描述

如果我选择必须使用 post 方法将请求发送到服务器的任何国家/地区，并且数据将显示在 Mat 表中，则需要从下拉列表的角度角度对 HTTP 客户端发布请求的帮助

目前正在发生的事情，我只有 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>

这是我的 TS 代码

      public dataSourceCountry = new MatTableDataSource<CountryMatch>([]);
      public columnsToDisplay: string[] = ['site', 'ibtInstitutionNamePIName','action'];
      public columnCTMStoDiplay: string[] = ['ctmsInstitutionNamePIName'];
      public countryTableDisplay = new MatTableDataSource<IbtList>([]);
      public cacheFullData =new MatTableDataSource<IbtList>([]);
      public matchsiteLabel: String;
      public ctmsMatch = false;
      constructor(private route: ActivatedRoute, private dataService: DataService,  private router: Router, public dialog: MatDialog) {

       }

      ngOnInit() {
            this.matchsiteLabel = "Match Sites"
            const routerSubscription = this.route.paramMap.subscribe(paramMap => {
              this.bcnumber = paramMap.get('bcnumber');
              //this.countryCode = paramMap.get('bcnumber');
            });
            this.unsubscribe.push(routerSubscription); 
              const countryListData = this.dataService.getcountryMatchDetails(this.bcnumber).subscribe(data => {  
              this.dataSourceCountry = new MatTableDataSource<CountryMatch>(data);
              this.countryList = data;  
              console.log(this.countryList);
          }); 

            this.unsubscribe.push(countryListData);
            const matchData = this.dataService.getIbtDetails(this.countryCode).subscribe(response => {  
            this.countryTableDisplay = new MatTableDataSource<IbtList>(response);    
            this.cacheFullData = new MatTableDataSource<IbtList>(response);
           }); 
          this.unsubscribe.push(matchData);
      }

  displayTable(){    
   if (this.selectedValue == "0")
      this.countryTableDisplay = this.cacheFullData;             
    else {
      const data = this.countryTableDisplay.data;
      this.dataSource.data = data;
      console.log(this.dataSource.data);
      this.dataSource1.data = data;
     }
   }

儿子

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

请让我知道我做错了什么。

提前致谢

标签： angularangular8

解决方案

如果您在更改下拉列表中的选项时尝试发送发布请求并更新该数据源，您可以调用该函数来发送发布请求并更新this.dataSource

在更改 Angular 下拉项时调用该函数

在 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>

在您的 TS 中添加updateData函数

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

推荐阅读