Ggtcf

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";
 );

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";
 );