angular 2/4 下拉错误

Question

我正在尝试在我的 Angular 应用程序中开发两个下拉菜单。第一个是 shop list，另一个是 godown list。当我 select 一家商店时，它会在这两种情况下自动 select 第一个。这里我想要两个下拉框。

如果我将函数 FetchPopulateOutlets 重命名为 ngOnInit 它会起作用，但如果还有其他 ngOnInit 函数，我会收到关于重复方法的错误。

 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;

}

我的Html是

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

Answer 1

请检查这个答案

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

并将html改为

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

angular 2/4 下拉错误

angular 2/4 dropdown error

angular2-forms

angular2-template

angular