Angular Reactive Forms 无法让 formControlName 在 ngFor 模板循环上设置值答案

【问题标题】：Angular Reactive Forms unable to get formControlName to set value on an ngFor template loopAngular Reactive Forms 无法让 formControlName 在 ngFor 模板循环上设置值
【发布时间】：2020-07-16 05:09:39
【问题描述】：

我正在使用 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 的数组，如下所示。

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

【问题讨论】：

看到您的 .ts 中没有名为“StaffMemberModel”的变量。注意：在 Angular 中，通常（推荐，非强制）你使用 camelCase 为变量命名 - 所以变量总是以小写开头，staffMemberModel 比 StaffMemberModel 更好-，Class 和 interface 大写-

标签： angular angular-reactive-forms ngfor

【解决方案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

【讨论】：