Angular 反应式 Forms 无法获取 formControlName 以在 ngFor 模板循环上设置值

Question

我正在使用 Angular 反应式 forms 并且我正在尝试获取表单控件值以在下拉列表中设置为默认值。 如果我不在模板代码中使用 *ngFor 循环，我可以让它工作。 但是，我需要使用它，因为标签中有很多选项。

    <select formControlName="staffName">
       <option>Bob Jason</option>
       <option>Sally Reel</option>
       <option>Jack Jones</option>  
       <option>George Smith</option>  
       <option>Harry Lake</option>  
    </select>

但是，如果我使用下面的代码，它就不起作用

     <select formControlName="staffName">
        <option *ngFor="let StaffMemberModel of StaffMemberModels">
            {{StaffMemberModel.firstName}} {{StaffMemberModel.lastName}}
        </option>      
     </select>

StaffMemberModel 是一个包含 id、firstName 和 lastName 的数组，如下所示。

它输出以下内容。 但是，它只显示下拉列表中的第一个选项，此时它应该显示在上一页中选择的工作人员。

Answer 1

您可以通过传递[value]="StaffMemberModel.id"标志来做到这一点。

它可以是名字、姓氏、ID，任何你想要的。

<form [formGroup]="form">
  <select formControlName="staffName">
    <option *ngFor="let StaffMemberModel of StaffMemberModels"
    [value]="StaffMemberModel.id" > 
      {{ StaffMemberModel.firstName }} {{ StaffMemberModel.lastName }}</option>
  </select>
</form>

如果您想看到它的实际效果： https://stackblitz.com/edit/angular-w8bjyl