Каскадное обновление выпадающего списка в Angular

#updates #cascadingdropdown #angular12

Вопрос:

Я хочу обновить только город из выпадающего списка каскад, и города выбираются по выбору страны, а в интерфейсе 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>

 

тс

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