Question

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

这是我想做的。

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

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

在模板上，我正在使用select，例如：

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

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

我不知道到底是什么问题。

请帮助

谢谢

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>

Answer 2

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  );

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

2 个答案: