How to make dropdown list populated in loop in Angular 6 HTML?

Question

I have an array of employees to which tests are assigned by Lead. When assigning tests, selected employee is assigned properly. while populating back, Lead can see which test is assigned to which employee.

I am facing issue is, EmployeeID is populated correct but its corresponding employee name is different.

Employee id and names are like <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>

Screenshot of result is as below where employeeID is populating correctly but EmployeeName is wrong.

Thanks in advance.

Screenshot after updating code to e.employeename

Answer 1

You can just use e.employeename like you did for the value 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

You don't actually need to reference the index in this case.

Your current HTML

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

Can be updated to

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