如何使下拉列表在Angular 6 HTML中循环填充？

Question

我有一系列由Lead分配测试的员工。分配测试时，将正确分配所选员工。在回填的同时，Lead可以查看将哪个测试分配给哪个员工。

我面临的问题是，EmployeeID填充正确，但是其对应的雇员姓名不同。

员工编号和姓名类似于<1，FName1>，<2，FName2>，<3，FName3>，<4，FName4>

<table class="table table-bordered table-sm m-0 w-auto">
        <tbody>
            <tr *ngFor="let t of tests">
                <td>
                    {{t.empid}} //Correct EmployeeID populated
                    <select *ngIf="t" id="assigned" name="assignedName" [(ngModel)]="t.empid" class="form-control">
                        <option *ngFor="let e of empids; let i = index" [value]="empids[i].employeeid">
                            {{empids[i].employeename}}   //Wrong employee Name populated
                        </option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>

结果截屏如下所示，其中employeeID正确填充，但EmployeeName错误。

谢谢。

将代码更新为e.employeename后的屏幕截图

Answer 1

您可以像使用e.employeename一样使用e.employeeid

<select *ngIf="t" id="assigned" name="assignedName" [(ngModel)]="t.empid" class="form-control">
    <option *ngFor="let e of empids; let i = index" [value]="e.employeeid">
         {{e.employeename}} // Change your code here
    </option>
</select>

Answer 2

在这种情况下，您实际上不需要引用索引。

您当前的HTML

<option *ngFor="let e of empids; let i = index" [value]="empids[i].employeeid">
    {{empids[i].employeename}}   //Wrong employee Name populated
</option>

可以更新为

<option *ngFor="let e of empids; let i as index" [value]="e.employeeid">
    {{e.employeename}} 
</option>