如何在下拉菜单中设置角度（全选）

Question

我正在尝试在我的 Angular 应用程序中开发一个下拉菜单。下拉列表是商店清单。当我选择一家商店时，它将显示或（显示）商店中的内容。所以在这里我想要下拉列表中的商店列表中的一个新项目（项目是所有商店）......就像 这个

这里的数据（购物清单）来自数据库（带有 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>

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