使用 Angular ReactiveForm setValue 方法设置默认值选项答案

【问题标题】：Set default value option with Angular ReactiveForm setValue method使用 Angular ReactiveForm setValue 方法设置默认值选项
【发布时间】：2019-09-12 23:13:44
【问题描述】：

我正在尝试使用 Angular 7 设置选择选项的默认值，但它没有设置默认选项值；

这是我尝试做的。

在我使用setValue()方法设置默认值的组件。

this.courseForm.controls['selectedTeacher'].setValue(this.course['Teacher'],{onlySelf: true});

在模板中我使用这样的选择：

  <select formControlName="selectedTeacher">
      <option *ngFor="let teacher of teachers" [ngValue]="teacher">
                    {{ teacher.FirstName }} {{teacher.LastName}}
       </option>
 </select>

通常当尝试这样输入文本时它可以工作，但选择列表不起作用。

我无法确切地意识到问题出在哪里。

请帮忙，

谢谢

【问题讨论】：

标签： javascript html angular

【解决方案1】：

Angular 使用对象引用，而不是属性，所以如果你这样做，如果你有每个老师的唯一标识符，它将起作用

const teacher = this.teachers.find(t=> t.id == this.course['Teacher'].id);
this.courseForm.controls['selectedTeacher'].setValue(teacher,{onlySelf: true});

或者你可以通过任何独特的属性找到

const teacher = this.teachers.find(t=> t.FirstName == this.course['Teacher'].FirstName && t.LastName == this.course['Teacher'].LastName  );

【讨论】：

【解决方案2】：

改变你的组件：

this.courseForm.controls['selectedTeacher'].setValue(this.course['Teacher'].id,{onlySelf: true})

在您的 html 中：

<select formControlName="selectedTeacher">
      <option *ngFor="let teacher of teachers" [value]="teacher.id">
                    {{ teacher.FirstName }} {{teacher.LastName}}
       </option>
 </select>

【讨论】：