Angular2多个下拉列表受到影响

Question

我的页面上有两个下拉列表。

一个是Country，另一个是City。两者都以"Please Select"作为默认值。

当用户更改Country中的值时，City中正确填充了各个城市。

但是，当用户从网页上的网格中按下edit record图标时，相应的值会在Country下拉列表中填充，但City下拉列值始终保持为{{1} }。

＆＃13;

＆＃13;

"Please Select"

＆＃13;

public onCountryChangeEvent(slectedCountryId): void {
        this.populateCityListByCountry(slectedCountryId);
  }

private populateCityListByCountry(countryId: Number) {
    
   var city: City = new City();
   city.cityId = AppConstants.PLEASE_SELECT_VAL;
   city.cityName = AppConstants.PLEASE_SELECT_STR;

  const cityCombo: FormControl = (<any>this.myForm).controls.cityId;
  if(AppUtility.isEmpty(countryId)){
      this.cityList=[];
      this.cityList.unshift(city);
      cityCombo.reset();
  } else {
      this.listingService.getCityListByCountry(countryId)
            .subscribe(
            restData => { 
        if(AppUtility.isEmpty(restData)){
           this.cityList=[];
           this.cityId=null;
           this.city=null;         
        }
        else{
          this.cityList = restData;
           if(!AppUtility.isEmptyArray(this.cityList)){
             if(!this.isEditing){
                this.cityId = this.cityList[0].cityId;              
               this.city=this.cityList[0].cityName;
              }
     
           }
           
        }   
        this.cityList.unshift(city);
       },
      error => {this.errorMessage = <any>error;},
      ()=> {  
        cityCombo.reset();                        
          }    
      );
  }
}

＆＃13;

＆＃13;

＆＃13;