CODEWITHSUNDEEP
angularangular2-templateangular2-formsangular2-select
Akhil
Akhil

Reputation: 381

Selected item in dropdown didn't show in Angular 2/4

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

Upvotes: 2

Views: 116

Answers (1)

Rahul Sharma
Rahul Sharma

Reputation: 10071

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

Upvotes: 1

Related Questions