Angular 中的级联下拉列表更新

问题描述

我只想从级联下拉列表中更新城市，城市是通过国家/地区选择获取的，在后端 api 中，只有 city_Id 从所有级联下拉列表中存储。我的意思是国家不存储在数据库中。如何在更新表单中更新城市？

HTML

<mat-form-field appearance="outline">
    <mat-label>Select Country</mat-label>
    <mat-select  (selectionChange)="onInputChange($event)"  required>
    <mat-option *ngFor="let Country of CountryList; let j=index" [value]="Country">
    {{j + 1}} {{Country}}
    </mat-option>
    </mat-select>
</mat-form-field>

<mat-form-field appearance="outline">
  <mat-label>Select City</mat-label>
  <mat-select formControlName="CityId" required>
  <mat-option *ngFor="let i of CityList; let j=index" [value]="i.CityId">
  {{j + 1}} {{i.City}}
  </mat-option>
  </mat-select>
</mat-form-field>

TS

 //get Countries
  fetchCountry(): void{
    this.std_service.getCountry()
    .subscribe(
      data => {
        this.CountryList = data;
        //console.log(this.CountryList);
      },error => {
        console.log(error);
      }
    )
  }

  onInputChange(e){
    console.log(e.value);
    this.std_service.getCitiesfromCountry(e.value)
      .subscribe(
        data => {
          this.CityList = data;
          console.log(this.CityList);
        },error => {
          console.log(error);
        }
      )
   }

//Update Code
 // update Student
  private UpdateStudent(){

    this.std_service.UpdateStudent(this.id,this.form.value)
      .pipe(first())
      .subscribe({
         next: () => {
           this.router.navigate(['/home']);
           this.snackBar.open('Successfully Updated','ok',{
            duration: 3000
          });
         },error: error => {
          this.snackBar.open(error,{
            duration: 3000
          });
          this.loading = false;
         }
      });
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）