Regarding multiple DropDownList

Question

Dear All,

I was developing one component using Angular 5 and ASP .Net MVC.

while developing component what I want to do is that I've two dropdown list with me.

 

First one is for  group :

in that I have common group names

which is as follows - 

 

HTML

 

<select class="form-control" name="Group" id="Group" required [value]='itemToEdit.GroupID' (change)="getServiceByGroup(i);">
  <option disabled value="">Select Groupoption>
  <option *ngFor='let cc of group' [value]="cc.GroupID">
     {{cc.GroupName}}
  option>
select>

TypeScript

 

this.commonService.getGroupList().subscribe(data => {
      this.group = data as string[];
    });

And Second is Service :

which contains Service list Related to Group as follows -

 

<select class="form-control" name="Service" id="Service" required [value]='itemToEdit.ServiceID' (change)="getServiceRate(i);">
    <option value="">Select Serviceoption>
    <option *ngFor='let cc of service' [value]="cc.ServiceID">
        {{cc.ServiceName}}
    option>
select>

 

 TypeScript

 

//Filling Service By Selection Of Group
  getServiceByGroup(index) {
    this.commonService.getServiceByGroup(index).subscribe(data => {
      this.service = data;
    });
  }

 

Here it seems look like - 

 

 

 

My problem is that I am creating multiple Group  and Service dropdown using table format in HTML. I am getting different Id for element but when choose Group for first time it will gives me correct output.

I have AddRow() in Typescript which will create row for me in table.

So in next row I have again two dropdown list Group And Service.

When I am Trying To get different Group then it makes effect on both previous Service DropDown and Latest ServiceDropDown.

I get come to know that It happening because of my getServiceByGroup() result.

But I don't know how to overcome on this particular problem.

Please suggest me some easy solutions.

Thanking  You in advance.