我正在尝试在Angular应用程序中开发一个下拉列表。下拉菜单是商店清单。当我选择一家商店时,它将显示或(显示)商店中的内容。因此,在这里,我想要下拉列表中商店列表中的一个新项目(项目为ALL SHOP)。 这个
这是我的Ts码
ngOnInit() {
this.Service.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.Service.FetchItemDetails(shopid, this.pageIndex).subscribe(itemsData => this.itemdetails = itemsData,
error => {
console.error(error);
this.statusMessage = "Problem with the service.Please try again after sometime";
});
这是我的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>
答案 0 :(得分:1)
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";
});
onSelect(shopid: number) {
if (shopId == 0) {
"Insert your logic here"
}
this.Service.FetchItemDetails(shopid, this.pageIndex).subscribe(itemsData => this.itemdetails = itemsData,
error => {
console.error(error);
this.statusMessage = "Problem with the service.Please try again after sometime";
});
}