Forms 运行Save()后,角度md选项dropwdown值重置为[0]值

Forms 运行Save()后,角度md选项dropwdown值重置为[0]值,forms,angular,routing,dropdown,md-select,Forms,Angular,Routing,Dropdown,Md Select,我有一个角度表单,其中包含md选项下拉列表,用于填写项目的详细信息。其中一个下拉列表用于城市列表,该列表根据选定的州/地区生成。当用户在新创建的项目上单击Save(Save())时,页面将转到project/[projectID]页面。当它这样做时,城市下拉值从用户选择的值切换到列表中的第一个值。当用户修改现有项目并保存时,它不会这样做,因为表单不需要重新路由。你有没有想过为什么会这样 我相信下面的信息还远远不够;请告诉我您还需要什么。非常感谢 项目详细信息.component.html:

我有一个角度表单,其中包含md选项下拉列表,用于填写项目的详细信息。其中一个下拉列表用于城市列表,该列表根据选定的州/地区生成。当用户在新创建的项目上单击Save(Save())时,页面将转到project/[projectID]页面。当它这样做时,城市下拉值从用户选择的值切换到列表中的第一个值。当用户修改现有项目并保存时,它不会这样做,因为表单不需要重新路由。你有没有想过为什么会这样

我相信下面的信息还远远不够;请告诉我您还需要什么。非常感谢

项目详细信息.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>
getCities()

保存()

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;
            ....

        }

    }

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

        }

    }

}