如何在下拉菜单中设置角度(全选)

时间:2018-07-31 06:44:18

标签: angular typescript angular2-template angular2-forms angular2-services

我正在尝试在Angular应用程序中开发一个下拉列表。下拉菜单是商店清单。当我选择一家商店时,它将显示或(显示)商店中的内容。因此,在这里,我想要下拉列表中商店列表中的一个新项目(项目为ALL SHOP)。 这个

enter image description here 这里的数据(商店清单)取自数据库(与Web api呈角度)

这是我的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>

1 个答案:

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