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

empids details as follows (3) [{…}, {…}, {…}] 0: employeeid: 3 employeename: "FName3" middlename: null password: "Three" role: "Analyst" surname: "LName3" username: "Three" proto: Object 1: {employeeid: 4, employeename: "FName4", middlename: null, surname: "LName4", username: "Four", …} 2: {employeeid: 143, employeename: "Kiran", middlename: "K", surname: "Kiran", username: "kiranA", …} — Harshal
– Harshal, Commented Oct 1, 2020 at 6:05

Kirubel · Accepted Answer · 2020-10-01 05:31:35Z

2

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>

edited Oct 1, 2020 at 5:31

answered Oct 1, 2020 at 5:17

Kirubel

1,6371 gold badge16 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Harshal Over a year ago

Tried this but still same result, not working. While populating back, value is in '[(ngModel)]="t.empid"'. I need to populate same value from 'empids' array. Do we need to do any comparison of t.empid to Array?

Kirubel Over a year ago

What does the array empids value holds? If you can share the data

Harshal Over a year ago

empids details as follows (3) [{…}, {…}, {…}] 0: employeeid: 3 employeename: "FName3" middlename: null password: "Three" role: "Analyst" surname: "LName3" username: "Three" proto: Object 1: {employeeid: 4, employeename: "FName4", middlename: null, surname: "LName4", username: "Four", …} 2: {employeeid: 143, employeename: "Kiran", middlename: "K", surname: "Kiran", username: "kiranA", …}

Kirubel Over a year ago

Logically this should've worked. What's the result when you tried to use e.employeename?

Harshal Over a year ago

Its same result as in question. Added screenshot in question.

|

Vorpal56 · Accepted Answer · 2020-10-01 05:19:01Z

0

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>

answered Oct 1, 2020 at 5:19

Vorpal56

713 bronze badges

1 Comment

Harshal Over a year ago

Tried this but still same result, not working. While populating back, value is in '[(ngModel)]="t.empid"'. I need to populate same value from 'empids' array. Do we need to do any comparison of t.empid to Array?

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related