Angular 响应式表单无法获取 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

Angular 响应式表单无法获取 formControlName 以在 ngFor 模板循环上设置值

Angular Reactive Forms unable to get formControlName to set value on an ngFor template loop

angular

angular-reactive-forms

ngfor