forms - Save() の実行後に Angular md-option ドロップダウン値が [0] 値にリセットされる

Question

プロジェクトの詳細を入力するための md-option ドロップダウンを含む Angular フォームがあります。これらのドロップダウンの 1 つは、選択された州/地域に基づいて生成される都市のリスト用です。ユーザーが新しく作成されたプロジェクトで [保存] (Save()) をクリックすると、ページは project/[projectID] ページにルーティングされます。その場合、City ドロップダウンの値は、ユーザーが選択した値からリストの最初の値に切り替わります。フォームを再ルーティングする必要がないため、ユーザーが既存のプロジェクトを変更して保存する場合、これは行われません。なぜこれが起こっているのかについて何か考えはありますか？

以下は十分な情報ではないと確信しています。他に何が必要か教えてください。どうもありがとう。

プロジェクト詳細.component.html:

          <!--City Dropdown-->
          <md-select id="cityId" class="mdl-cell mdl-cell--6-col mdl-textfield"
              key="cityId" placeholder="Select city" label="City*"
              formControlName="cityId" error="You must select a city." required (ngModelChange)="onSelectCity($event)">
              <md-option *ngFor="let city of cities" [value]="city.id">
                {{ city.name }}
              </md-option>
          </md-select>

project-detail.component.ts

initForm():

 {

        this.myForm = this.FormBuilder.group({
            .....
            cityId              : [null, [<any>Validators.required, validateDropdown]],
            ......
        });

updateForm():

updateForm() {
        // existing project
        if (!this.newProject) {
....
// Find the project's Country,Region,City,Labortype,AssemblyType in the loaded dropdown values
            let selectedCountry = this.countries.find(country => country.id === this.model.countryId);
            let selectedRegion = this.regions.find(r => r.id === this.model.regionId);
            let selectedCity = this.cities.find(ct => ct.id === this.model.cityId);
            console.log('SelectedCity: ', selectedCity.name);
....
}
}

getCities()

 getCities(regionId: string) {
        return this.locationService.getCities(regionId).then(cities => {
            if (cities && cities.length > 0) {
                this.cities = cities;
                setTimeout(() => { this.myForm.controls['cityId'].setValue(cities[0].id); }, 0);
            }
        });
    }

保存（）

 save(model: any, isValid: boolean) {
        console.log('SAVE FUNCTION');
        if (!isValid) {
            console.warn('not valid!');
            return;
        }
        this.submitted = true; // set form submit to true

        // check if model is valid
        // if valid, call API to save project
        console.log(model, isValid);
        let fields = this.myForm.value;
        if (this.newProject) {

            // this.model.name = fields['projectName'];
            this.projectService.createProject(fields).then(
                (newData) => {
                    console.log('New Project Created!', newData);
                    // this.projectService.getLiveProjects();
                    // Open a toast
                    this.mdlSnackbarService.showToast('Project Created');

                    // Reset form fields to show no changes
                    this.myForm.markAsPristine();
                    this.myForm.markAsUntouched();


                    // redirect to Edit Project page for this project
                    // overwrite the route history for the 'new project'
                    this.router.navigate(['/projects', newData.id], { replaceUrl: true });
                    console.log('Navigating to /projects/ProjectID URL')
                }, (error) => {
                    this.mdlDialogService.alert('Failed to create project');
                });
        } else {
            this.projectService.updateProject(fields, this.model.id).then(
                (newData) => {
                    console.log('Project Updated!', newData);
                    // this.projectService.getLiveProjects();
                    // Open a toast
                    this.mdlSnackbarService.showToast('Project Updated!');

                    // Reset form fields to show no changes
                    this.myForm.markAsPristine();
                    this.myForm.markAsUntouched();

                    // redirect to Edit Project page for this project
                    this.router.navigate(['/projects', newData.id]);
                }, (error) => {
                    this.mdlDialogService.alert('Failed to update project');
                });
        }
    }

project.model.ts

// the shared project model class
import { EntityData } from '../../shared/models/entity-data.model';
import { IProjectData } from '@app/interfaces';

export class Project extends EntityData {
    ....
    public countryId: string;
    public countryName?: string | undefined;
    public regionId: string;
    public regionName?: string | undefined;
    public cityId: string;
    public cityName?: string | undefined;
    ....

    constructor(data?: IProjectData) {
        super(data);
        if (data) {
            ....
            this.countryId = data.countryId;
            this.countryName = data.country && data.country.name;
            this.regionId = data.regionId;
            this.regionName = data.region && data.region.name;
            this.cityId = data.cityId;
            this.cityName = data.city && data.city.name;
            ....

        }

    }

}