角度 2/4 下拉错误答案

【问题标题】：angular 2/4 dropdown error角度 2/4 下拉错误
【发布时间】：2018-12-31 22:40:12
【问题描述】：

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

如果我将函数 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>

【问题讨论】：

您得到的错误是什么？你被困在哪里了？
@Cecilya 在这里我将函数 FetchPopulateOutlets 更改为 ngOnInit 我得到了答案，但如果其他 ngOnInit 函数出现重复错误）这里我已经使用了另一个函数 ngoninit
这是您的第二个问题。上一个怎么了？
@Antoniossss 旧问题有一些错误，所以我改变了。
需要明确的是，当您单击下拉列表时，您没有来自后端的值，除非您在 ngOnInit 函数中获取它，对吗？

标签： angular angular2-template angular2-forms

【解决方案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>

【讨论】：