Angular中ngFor循环下拉框取值报错及控制台打印问题

第一步：修复value绑定报错 #

将<option>标签里的value={{tipo['types']}}改为Angular标准的属性绑定语法，避免解析错误：

<option *ngFor="let tipo of tipos" [value]="tipo.types">{{tipo.descrip}}</option>

（注：tipo['types']和tipo.types效果一致，点语法更简洁易读）

第二步：实现选中值打印到控制台 #

提供两种常用实现方式，按需选择：

方式一：使用ngModel双向绑定（推荐，支持数据同步） #

1. 在组件类中定义变量存储选中值：

selectedTipo: string;

2. 模板中给<select>添加[(ngModel)]绑定和change事件：

<select id="opciones" name="opciones" [(ngModel)]="selectedTipo" (change)="logSelectedValue()">
  <option disabled>Select</option>
  <option *ngFor="let tipo of tipos" [value]="tipo.types">{{tipo.descrip}}</option>
</select>

3. 组件类中添加打印方法：

logSelectedValue() {
  console.log('选中的types值:', this.selectedTipo);
}

4. 关键：在模块中导入FormsModule（ngModel依赖此模块）：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他已导入模块（如BrowserModule）
    FormsModule
  ]
})
export class AppModule { }

方式二：使用change事件（无需FormsModule） #

1. 模板中给<select>添加change事件：

<select id="opciones" name="opciones" (change)="logSelectedValue($event)">
  <option disabled>Select</option>
  <option *ngFor="let tipo of tipos" [value]="tipo.types">{{tipo.descrip}}</option>
</select>

2. 组件类中通过事件对象获取选中值并打印：

logSelectedValue(event: Event) {
  const selectEl = event.target as HTMLSelectElement;
  const selectedValue = selectEl.value;
  console.log('选中的types值:', selectedValue);
}

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