updates - Angular中的级联下拉列表更新

Question

我想从级联下拉列表中仅更新城市，并通过国家/地区选择获取城市，并且在后端 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 , 'ok', {
            duration: 3000
          });
          this.loading = false;
         }
      });
  }