下拉列表中的选定项目未显示在Angular 2/4中

Question

我正在尝试在我的Angular应用程序中开发一个下拉列表。 Drop Down是商店列表。当我选择商店时，它将显示或（显示）商店中的内容。但是当我更改下拉列表时，下拉列表会发生变化，但下拉列表的内容不会改变，它会显示第一个选定的内容值（不要更改内容）所以这里我希望选择的项目值显示或显示。

HTML代码

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

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

Answer 1

在API调用中将this.shopid更新为shopid并验证您是否获取数据。

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