Angular下拉选择列表值异常：提交时person值为何返回undefined？

你遇到的这个问题是Angular模板里很常见的变量作用域冲突导致的，我来给你理清楚并解决：

为什么会出现undefined？ #

你的<option>标签里用了*ngFor="let person of people"，这会在循环的每个<option>局部作用域里创建一个叫person的变量。而你绑定的[(ngModel)]="person"，其实指向的是这个循环里的局部person，不是组件类里你定义的那个全局person属性。这就导致组件类的person根本没被下拉框的选择更新，所以表单提交时movieForm.value.person自然是undefined。

怎么修复？ #

第一步：修改循环变量名，避免冲突

把循环里的变量改成和组件类属性不一样的名字，比如p或者personItem，这样ngModel就能正确绑定到组件类的person上了：

<div *ngIf="people">
  <label>Tuoja</label>
  <select [(ngModel)]="person" name="person" required>
    <option *ngFor="let p of people" [value]="p.PersonID">
      {{p.FirstName}} {{p.LastName}}
    </option>
  </select>
</div>

第二步：确认组件类有对应的属性

确保你的组件.ts文件里已经声明了person变量（如果还没的话）：

// 组件类代码片段
person: number; // 因为你绑定的是PersonID，类型根据你的实际数据调整
people: Array<{PersonID: number, FirstName: string, LastName: string}>; // 示例类型，替换成你的实际接口

可选：绑定完整对象（如果需要）

如果你想绑定整个人员对象而不只是ID，可以把[value]换成[ngValue]：

<option *ngFor="let p of people" [ngValue]="p">
  {{p.FirstName}} {{p.LastName}}
</option>

对应的组件类属性也要改成对象类型：

person: {PersonID: number, FirstName: string, LastName: string}; // 或者你的Person接口类型

这样修改后，再提交表单，movieForm.value.person就能正确获取到你选中的值了。

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