如何在下拉列表中设置 angular (Select all )

Question

我正在尝试在我的 Angular 应用程序中开发一个下拉菜单。下拉列表是商店列表。当我 select 一家商店时，它将显示或（显示） shop.so 中的内容在这里，我想在下拉列表中的商店列表中添加一个新项目（项目是 ALL SHOP）..喜欢 这个

这里的数据（shopslists）是从数据库（angular with 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";
            });
    }