I am trying to develop two drop downs in my Angular application. The 1st one is shop list
and the other one is godown list
. When I select a shop it will show it on data.but when I select Godown it's not changing data. Here I have two drop down boxes.
I think my problem is in my typescript file(Onselect) because here I have 2 drop downs(in html I use 2 Onselect function but in my ts file have only one function). I'm just a beginner in Angular , so I would appreciate any comments on downsides of this method:
ngOnInit() {
this.Service.FetchPopulateOutlets().subscribe(outletsData => {
let allShops = {
ShopName: 'All',
ShopID: 0
}
this.outletDetails = [allShops, ...outletsData]
}, error => {
console.error(error);
this.statusMessage = "Problem with the service.Please try again after sometime";
});
{
this._enqService.FetchGodownPopulateOutlets().subscribe(GodownsData =>
{
let allGodowns = {
GodownName: 'All',
GodownId: 0
}
this.GodownDetails = [allGodowns, ...GodownsData]
},
error => {
console.error(error);
this.statusMessage = "Problem with the service.Please try again after sometime";
});
onSelect(shopid: number, godownid: number) {
this._loginService.selectedshopid = shopid;
this._loginService.selectedgodownid = godownid;
}
this._enqService.FetchItemDetails(shopid,godownid, this.pageIndex).subscribe(itemsData => this.itemdetails = itemsData,
error => {
console.error(error);
this.statusMessage = "Problem with the service.Please try again after sometime";
});
method
but if i create a separate method for the second dropdown:how to showing data for
this method?
( this._enqService.FetchItemDetails(shopid,godownid, this.pageIndex).subscribe(itemsData => this.itemdetails = itemsData,
error => {
console.error(error);
this.statusMessage = "Problem with the service.Please try again after sometime";)
HTML file:
<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>
<span>
<select class="formcontrol" name="godowndata" (change)="onSelect($event.target.value)">
<option value="0" disabled>Select a Godown</option>
<option *ngFor="let godowndata of GodownDetails" value={{godowndata.GodownId}}>{{godowndata.GodownName}}</option>
</select>
</span>
use
[value]="outletDetail.ShopID"
instead ofvalue={{outletDetail.ShopID}}