Angular Reactive Forms无法获得formControlName来设置ngFor模板循环上的值

Question

我正在使用Angular反应形式，并且我试图在下拉列表中将形式控制值设置为默认值。如果我在模板代码中不使用* 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