Angular联动下拉列表问题：控制台仅获取ID，如何获取名称？

方法一：使用[ngValue]绑定完整对象 #

原代码用[value]仅绑定了ID，导致ngModel只能获取到数值ID。改用[ngValue]可以绑定整个对象，让选中变量直接存储包含名称的完整数据结构。

修改后的register.component.html #

Country:
<select *ngIf="getCountries()" [(ngModel)]="selectedCountry" (change)="onSelectCountry($any($event.target).value)" class="form-control input-lg" id="country" formControlName="country">
    <option [ngValue]="null">Select Country</option>
    <option *ngFor="let country of getCountries()" [ngValue]="country">{{country.name}}</option>
</select>

States:
<select *ngIf="states" [(ngModel)]="selectedState" (change)="onSelectState($any($event.target).value)" class="form-control input-lg" id="state" formControlName="state">
    <option [ngValue]="null">Select State</option>
    <option *ngFor="let state of states" [ngValue]="state">{{state.name}}</option>
</select>

City:
<select *ngIf="cities" [(ngModel)]="selectedCity" class="form-control input-lg" id="city" formControlName="city">
    <option [ngValue]="null">Select City</option>
    <option *ngFor="let city of cities" [ngValue]="city">{{city.name}}</option>
</select>

修改后的register.component.ts #

调整变量类型和方法逻辑，适配对象类型的选中值：

selectedCountry: {id: number, name: string} | null = null;
selectedState: {id: number, country_id: number, name: string} | null = null;
selectedCity: {id: number, state_id: number, name: string} | null = null;
states= [];
cities= [];

onSelectCountry(country: {id: number, name: string} | null) {
    this.selectedCountry = country;
    this.selectedState = null;
    this.cities = [];
    if (country) {
        this.states = this.getStates().filter(item => item.country_id === country.id);
    }
}

onSelectState(state: {id: number, country_id: number, name: string} | null) {
    this.selectedState = state;
    this.cities = [];
    if (state) {
        this.cities = this.getCity().filter(item => item.state_id === state.id);
    }
}

// 以下方法保持不变
getCountries() {
    return [
        { id: 1, name: 'India' },
        { id: 2, name: 'USA' },
        { id: 3, name: 'Russia' }
    ];
}

getStates() {
    return [
        { id: 1, country_id: 1, name: 'Bihar' },
        { id: 2, country_id: 1, name: 'odisha' },
        { id: 3, country_id: 2, name: 'Albama' },
        { id: 4, country_id: 2, name: 'Alaska' },
        { id: 5, country_id: 3, name: 'Moscow' },
        { id: 6, country_id: 3, name: 'Moscow oblast' },
    ]
}

getCity() {
    return [
        { id: 1, state_id: 1, name: 'Patna' },
        { id: 2, state_id: 1, name: 'Amarpur' },
        { id: 3, state_id: 1, name: 'Begusarai' },
        { id: 4, state_id: 1, name: 'Bhagalpur' },
        { id: 5, state_id: 2, name: 'Bhubaneswar' },
        { id: 6, state_id: 2, name: 'Cuttack' },
        { id: 7, state_id: 2, name: 'Rourkela' },
        { id: 8, state_id: 2, name: 'Koraput' },
        { id: 9, state_id: 3, name: 'Arab' },
        { id: 10, state_id: 3, name: 'Argo' },
        { id: 11, state_id: 3, name: 'Athens' },
        { id: 12, state_id: 4, name: 'Big Lake' },
        { id: 13, state_id: 4, name: 'Craig' },
        { id: 14, state_id: 5, name: 'Annino' },
        { id: 15, state_id: 5, name: 'Bibirevo' },
        { id: 16, state_id: 5, name: 'Kotlovka' },
        { id: 17, state_id: 6, name: 'Beloomut' },
        { id: 18, state_id: 6, name: 'Biorki' },
    ]
}

现在可以直接通过this.selectedCountry?.name、this.selectedState?.name、this.selectedCity?.name获取对应名称。

方法二：通过ID查找对应名称（保留原绑定逻辑） #

如果不想修改模板绑定，可通过ID在数据源中匹配对应的名称，新增以下方法到组件类中：

getSelectedCountryName(): string {
    if (this.selectedCountry === 0) return '';
    const country = this.getCountries().find(c => c.id === this.selectedCountry);
    return country ? country.name : '';
}

getSelectedStateName(): string {
    if (this.selectedState === 0) return '';
    const state = this.getStates().find(s => s.id === this.selectedState);
    return state ? state.name : '';
}

getSelectedCityName(): string {
    if (this.selectedCity === 0) return '';
    const city = this.getCity().find(c => c.id === this.selectedCity);
    return city ? city.name : '';
}

调用时直接使用this.getSelectedCountryName()即可获取对应的名称。

内容的提问来源于stack exchange，提问作者MRINAL