Angular中如何从数组渲染下拉框并获取选中的完整对象？

问题原因 #

你当前的代码无法获取完整对象，是因为<option value={{item}}>会将对象强制转换为字符串"[object Object]"，而非保留对象引用。当触发change事件时，e.target.value拿到的是这个字符串，自然无法访问对象的nombre属性。

方案一：使用[(ngModel)] + [ngValue]（推荐） #

这是Angular官方推荐的双向绑定方式，能直接绑定复杂对象，无需手动处理转换：

组件HTML修改：

<select [(ngModel)]="seleccionado">
    <option [ngValue]="null">----</option>
    <option [ngValue]="item" *ngFor="let item of noMensuales">
        {{item.nombre}}
    </option>
</select>

组件TS调整：
可以移除update方法，因为[(ngModel)]会自动将选中的完整对象赋值给seleccionado。如果需要在选中时执行额外逻辑，可添加(ngModelChange)事件：

// 保留原有代码，移除update方法，或添加如下方法
onSeleccionadoChange() {
    console.log(this.seleccionado);
    console.log(this.seleccionado?.nombre);
}

对应的HTML修改为：

<select [(ngModel)]="seleccionado" (ngModelChange)="onSeleccionadoChange()">
    <!-- 选项内容不变 -->
</select>

方案二：通过唯一标识/索引手动匹配对象 #

如果不想使用双向绑定，可以利用对象的唯一ID或循环索引，在change事件中从数组里找到对应对象：

方式1：使用对象唯一ID

组件HTML：

<select (change)="update($event)">
    <option value="default">----</option>
    <option [value]="item.id" *ngFor="let item of noMensuales">
        {{item.nombre}}
    </option>
</select>

组件TS的update方法修改：

update(e: any) {
    const selectedId = e.target.value;
    if (selectedId !== 'default') {
        // 假设每个item都有唯一的id属性
        this.seleccionado = this.noMensuales.find(item => item.id === selectedId);
    } else {
        this.seleccionado = {};
    }
    console.log(this.seleccionado);
    console.log(this.seleccionado?.nombre);
}

方式2：使用循环索引

组件HTML：

<select (change)="update($event)">
    <option value="default">----</option>
    <option [value]="index" *ngFor="let item of noMensuales; let index = index">
        {{item.nombre}}
    </option>
</select>

组件TS的update方法修改：

update(e: any) {
    const selectedIndex = e.target.value;
    if (selectedIndex !== 'default') {
        this.seleccionado = this.noMensuales[selectedIndex];
    } else {
        this.seleccionado = {};
    }
    console.log(this.seleccionado);
    console.log(this.seleccionado?.nombre);
}

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