javascript - 使用 Angular ReactiveForm setValue 方法设置默认值选项

Question

我正在尝试使用 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>

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

我无法确切地意识到问题所在。

请帮忙，

谢谢

标签： javascripthtmlangular

Answer 1

更改您的组件：

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>