I need to display an employee name next to the corresponding employee number for "x" number of employees.

A parent form will provide the total number of employees required.

As each employee number is entered an http get will obtain the corresponding employee name.
Then if another employee is required an input for the next employee number will be displayed.

This is an Angular Reactive Form and each employee id/name combination is part of a FormArray.

An async pipe is used to pull in the employee name. When 1 is entered as the id for the first employee the correct name appears. The problem is that when 2 is entered as the id for the next employee both names change to the new name.

Have not been able to resolve by parsing the FormArray. If that isn't possible would it be better to combine the returned observables somehow and parse the names into the correct fields?

Here's a stackblitz that shows the problem.

https://stackblitz.com/edit/angular-ivy-dr9jjy

CodePudding user response：

The observable employeeName$ is contains only one name. The observable employeeName$ is duplicated as the number of the ngFor number of loop.