背景
在 Angular 开发中，当我们使用 [(ngModel)] 或 formControlName 绑定 select 元素的模型值时，有时会发现在 select 中出现一个奇怪的选项。这个选项通常是一个空值或者一个看起来没有意义的值。
原因
这个问题出现的原因是 Angular 的双向数据绑定机制。当我们将模型值设置为一个不在选项列表中的值时，Angular 会自动往 select 元素中插入一个新的选项来表示这个值。
例如，考虑下面的 HTML 代码：
------- ---------------------------- ------- ---------------- ---------- ------- ---------------- ---------- ---------
如果我们将 selectedValue 的值设置为 3，Angular 就会自动在 select 元素末尾添加一个新的选项：
------- -------------------
这个新选项的 value 属性的值是一个问号，它表示这个选项的值是未定义的。
解决办法
要解决这个问题，我们需要在设置模型值之前检查该值是否在选项列表中。如果不是，我们需要手动将其设置为空或者选择一个默认值。
下面是一个示例组件，它演示了如何在 Angular 应用中处理这个问题：
------ - --------- - ---- ----------------
------------
--------- -------------
--------- -
------- ----------------------------
------- -------------------------
------- ---------------- ----------
------- ---------------- ----------
---------
-
--
------ ----- --------------- -
------------- - ---
--------------- ------- -
-- ------ --- --- -- ----- --- ---- -
------------------ - ------
- ---- -
------------------ - ---
-
-
-在这个组件中，我们手动将第一个选项的值设置为空，并在 setValue 方法中检查传入的值是否在选项列表中。如果是，我们将 selectedValue 的值设置为该值；否则，我们将其设置为空。
结论
Angular 在双向数据绑定时会自动向 select 元素中添加新选项来表示不在选项列表中的值。要解决这个问题，我们需要手动检查并处理这些值。在实际开发中，我们应该根据具体情况选择合适的解决办法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26029