2

I am trying to develop a dropdown in my Angular application. The Drop Down is shop list. When I select a shop it will show or (display) the content in the shop. But when I change the drop down, the drop down will change but the content of the drop-down does not change, it will show the first selected content value(do not change the content) so Here I want selected item value to show or display.

HTML code

<span>                        
    <select class="formcontrol" name="outletDetail"(change)="onSelect($event.target.value)">
        <option value="0" disabled>Select a Shop</option>
        <option *ngFor="let outletDetail of outletDetails" value={{outletDetail.ShopID}}>{{outletDetail.ShopName}}</option>
    </select>
</span>

ts files

ngOnInit() {
    this.Service.FetchPopulate().subscribe(outletsData => this.outletDetails = outletsData,
        error => {
            console.error(error);
            this.statusMessage = "Problem with the service.Please try again after sometime";
        });
}

onSelect(shopid: number) {
    this.Service.FetchItemDetails(this.shopid, this.pageIndex).subscribe(itemsData => this.itemdetails = itemsData,
        error => {
            console.error(error);
            this.statusMessage = "Problem with the service.Please try again after sometime";
        });
}
Roy
  • 7,811
  • 4
  • 24
  • 47
Akhil
  • 381
  • 1
  • 8
  • 22

1 Answers1

1

Update this.shopid to shopid in API call and verify are you getting data or not.

onSelect(shopid: number) {
    this.Service.FetchItemDetails(shopid, this.pageIndex) // change here
       .subscribe(itemsData => this.itemdetails = itemsData,
        error => {
            console.error(error);
            this.statusMessage = "Problem with the service.Please try again after sometime";
        });
}
Rahul Sharma
  • 9,534
  • 1
  • 15
  • 37
  • can you please check this? this is the problem.https://stackoverflow.com/questions/51630451/angular-2-4-multiple-drop-down – Akhil Aug 03 '18 at 03:14