Angular 如何在ngFor中动态生成mat select

Angular 如何在ngFor中动态生成mat select,angular,angular-material-6,Angular,Angular Material 6,我使用的是Angular 7和Angular Material 6.4.1。我有一张表格,上面有一个员工区。默认情况下,表单将选择一个空的员工信息,但可以添加更多员工,因此我需要重复(ngFor for employee数组)整个部分。该部分有多个mat select required,并指定了它们的formControl,但当我在ngFor中设置mat select,并单击按钮添加新员工时,整个部分都被复制,所有mat select触发器事件hasError并变为红色。 Employees数组

我使用的是Angular 7和Angular Material 6.4.1。我有一张表格,上面有一个员工区。默认情况下,表单将选择一个空的员工信息,但可以添加更多员工,因此我需要重复(ngFor for employee数组)整个部分。该部分有多个mat select required,并指定了它们的formControl,但当我在ngFor中设置mat select,并单击按钮添加新员工时,整个部分都被复制,所有mat select触发器事件hasError并变为红色。 Employees数组:otEmployees--默认情况下为空 我尝试为FormControls创建动态名称,这样每个emp对象都有一个FormControls数组

<pre>
<div *ngFor="let emp of otEmployees; let i = index" id="bottomLine">

            <div fxLayout="row" fxLayout.xs="column">
              <div>
                <mat-label >Employee ID </mat-label>
                <mat-label >{{emp.employeeId}}</mat-label>
              </div>

              <div>
                <mat-form-field>
                  <mat-label>Employee Name</mat-label>
                  <mat-select [formControl]="emp.emploFormControls[0]" required [(ngModel)]="emp.employeeName">
                    <mat-option>Select --</mat-option>
                    <mat-option *ngFor="let conseq of consequencesIfNotDone" [value]="conseq">`enter code here`
                      {{conseq.consequence1}}
                    </mat-option>
                  </mat-select>
                  <mat-error *ngIf="selectedDivisionId < 1">Please choose a Division first</mat-error>
                  <mat-error *ngIf="emp.emploFormControls[0].hasError('required') && selectedDivisionId >= 1">Please choose an Employee
                    Name</mat-error>
                  <mat-hint>{{emp.emploFormControls[0].value?.sound}}</mat-hint>
                </mat-form-field>
              </div>
</div>
</div>
</div>
</pre>

员工ID
{{emp.employeeId}
员工姓名
挑选--
`在这里输入代码`
{{conseq.consequence1}
请先选择一个部门
请选择一名员工
名称
{{emp.emploFormControls[0]。值?.sound}

预计将使用mat select复制该部分,并且每个部分都独立工作。当前行为是复制所有mat select触发器hasError并变为红色。

使用emp.EmployFormControls[i]而不是emp.EmployFormControls[0]@khush的注释可能会解决您的问题,但您并没有真正充分利用反应式表单。请看一看,您应该根据formcontrols的数量来构建ngFor循环,这样您也可以摆脱([ngModel]),在使用被动表单时不应该使用([ngModel]),因为formcontrols跟踪您的模型。我同意@BastienverschaeteI不能使用emp。emploFormControls[I]因为“emp”是nfFor数组中的元素,emploFormControls是一个固定数组,每次添加新员工时都会创建该数组,并且在同一位置上始终具有相同数量的值