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
-
- 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.