尝试将双向数据绑定到选择元素时遇到问题[重复]

Posted 2023-03-13

【中文标题】尝试将双向数据绑定到选择元素时遇到问题[重复]

【英文标题】：Having trouble trying to two-way data bind to select element [duplicate]

【发布时间】：2016-12-22 09:38:04

【问题描述】：

是否可以将双向数据绑定到如下所示的“选择”下拉菜单？

<select [(ngModel)]="selectedSport">
  <option *ngFor="let s of sports" [value]="s">s.Name</option>
</select>

我无法让它工作。我也试过只绑定 ID，但也无法正常工作。 See Plnkr here

我使用 Angular 站点中的“快速入门”实时 plnkr 示例作为基础。

我得到的错误是：

无法绑定到“ngModel”，因为它不是“select”的已知属性。

更新

感谢君特。我意识到我需要从 RC4 更新到 RC5。我已经尝试使用角度“表单”plnkr 示例进行相同的操作（因此加载了表单模块）。我仍然无法让它与 RC5 一起使用。是否可以将选择绑定到“对象”或者它必须是像数字这样的值类型？谢谢。

Second plnkr

解决方案

查看 Günter 的回答和评论。 我从 RC4 升级到 RC5，导入了 FormsModule，并且不得不在 'option' 元素上使用 [ngValue] 而不是 [value]。

<select [(ngModel)]="selectedSport">
  <option *ngFor="let s of sports" [ngValue]="s">s.Name</option>
</select>

【问题讨论】：

查看我的回答下方的评论。

【参考方案1】：

您需要加载表单模块

import  FormsModule  from '@angular/forms';

@NgModule(
imports: [ FormsModule, ... ],

【讨论】：

我也觉得[value] 也支持 RC.5 中的对象，但似乎并非如此。对于非字符串值，您仍然需要使用 [ngValue]="..." plnkr.co/edit/CG7btYCdRZQ2OgAyChn5?p=preview

太棒了。非常感谢君特。现在我只需从 RC4 升级到 5 :)