Angular6 - 反应形式 - 使用对象和[选定]绑定时无法以编程方式设置选择选项答案

【问题标题】：Angular6 - Reactive Forms - Cannot programmatically set select option when using objects and [selected] bindingAngular6 - 反应形式 - 使用对象和[选定]绑定时无法以编程方式设置选择选项
【发布时间】：2020-05-06 17:19:05
【问题描述】：

这里真的被难住了。我在 Angular 项目中有两种反应形式。

两者都有一个选择控件，选项存储在类变量中。

一种形式使用简单的选项字符串作为员工选项，如下所示：

["Dan Smith", "Mark Johnson", etc.]

另一种形式使用对象，如：

[
  {
    value: "Dan Smith",
    selected: false,
    hidden: false
  },
  ...
]

Stackblitz 示例：https://stackblitz.com/edit/angular-nks51y

在示例中，我有用于添加新随机选项和设置随机选择选项的按钮。

按钮适用于使用简单字符串的表单，但不适用于使用对象 {} 的表单。

另外，对象形式没有设置默认值。

我知道我错过了什么，但不知道是什么。

【问题讨论】：

标签： angular angular6 angular2-forms angular-reactive-forms

【解决方案1】：

你的代码有两个错误：

您应该永远不要设置选择元素的selected 属性。绑定的重点在于，选择的选项是设置为表单控件值的选项。模型是真相的来源，而不是观点
选定的值（即 FormControl 的值）是一个对象：员工对象本身。但是模板中使用的ngValue 是name.value，即一个字符串，它是员工对象的值。员工对象不能 === 到其 value 属性。

所以代码应该是：

<select formControlName="employeeName">
  <option *ngFor="let employee of employeeNameObjectOptions" [ngValue]="employee" [hidden]="employee.hidden">
    {{ employee.value }}
  </option>                
</select>

请注意，我选择将 name 重命名为 employee，因为这是变量所引用的：员工，而不是姓名。好的命名有助于找出错误。

您的固定演示：https://stackblitz.com/edit/angular-pundfg?file=src%2Fapp%2Fapp.component.html

【讨论】：

JB Nizet，感谢您抽出宝贵时间清楚、彻底地回答这个问题，并举例说明。你能稍微谈谈 [compareWith] 的用法吗？在寻找这个问题的解决方案时，我发现了多个对它的引用，但不太了解它的必要性。
它允许使用除严格相等之外的东西（即===）来测试选项的值是否应该被认为等于表单控件的值。想象一下，您使用 http 请求获得一个对象，其中包含当月的员工。然后您发出另一个 http 请求，让公司的所有员工都填充选择框。尽管当月的员工在功能上是公司的员工之一，但他们是不同的 JavaScript 对象。例如，compareWith 可用于将具有相同 ID 的两个员工视为相等。

【解决方案2】：

您的选择选项的ngValue 是一个字符串[ngValue]="name.value"，并且在您为其设置对象时类型不匹配。

<option *ngFor="let name of employeeNameObjectOptions" [selected]="name.selected" [ngValue]="name" [hidden]="name.hidden">
        {{ name.value }}
</option>

【讨论】：