CODEWITHSUNDEEP
angularangular2-templateangular2-forms
Akhil
Akhil

Reputation: 381

angular 2/4 dropdown error

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 auto select the first one in both cases. Here I want two drop down boxes.

If I rename the function FetchPopulateOutlets to ngOnInit it works, but if there are other ngOnInit functions i get an error about duplicated methods.

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

onSelect(shopid: number) {       
    this._loginService.selectedshopid = shopid;      
}

FetchGodown() {
    this._enqService.FetchGodownPopulateOutlets().subscribe(GodownsData => this.GodownDetails = GodownsData,
        error => {
            console.error(error);
            this.statusMessage = "Problem with the service.Please try again after sometime";
        });
}
onSelects(godownid: number) {
    this._loginService.selectedgodownid = godownid;

}

MY Html is

<span>          
    <select class="formcontrol" name="outletDetail" (click)="FetchPopulateOutlets()" (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"(click)="FetchGodown()"(change)="onSelects($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>

Upvotes: 1

Views: 93

Answers (1)

Brock James
Brock James

Reputation: 196

Please check this answer

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

    {
        this._enqService.FetchGodownPopulateOutlets().subscribe(GodownsData => this.GodownDetails = GodownsData,
            error => {
                console.error(error);
                this.statusMessage = "Problem with the service.Please try again after sometime";
            });

And change html to

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

Upvotes: 1

Related Questions