我有这样的代码:
<ion-col class="settings ion-text-end">
<ion-icon name="pricetags-outline" size="small" (click)="headerService.openSelect()"></ion-icon>
<ion-select style="display: none;" interface="popover" fill="none" *ngIf="!headerService.noPShops && headerService.showSearch() && headerService.selectVisible"
(ionFocus)="headerService.updateShops()" [(ngModel)]="headerService.selectedPShop"
id="selectPhysical">
<ion-select-option *ngFor="let shop of headerService.pshops" [value]="shop.url">{{shop.name}}</ion-select-option>
</ion-select>
<ion-select-option *ngFor="let shop of headerService.pshops" [value]="shop.url">{{shop.name}}</ion-select-option>
<ion-icon (click)="headerService.changeMenu()" name="settings-sharp" size="small" title="Configuración"></ion-icon>
</ion-col>
字符串
我需要让离子图标像离子选择一样工作。或者至少,使ion选择与ion图标具有相同的设计。“
尝试使离子选择显示为无,但...离子选择选项没有出现。
有办法吗?
1条答案
按热度按时间1wnzp6jl1#
要实现与
ion-icon
和ion-select
类似的行为,可以使用ion-popover
在单击图标时显示选项。以下是您的操作方法:1.创建将显示以下选项的弹出框组件:
popover-component.ts:
字符串
1.将弹出框组件添加到应用模块:
app.module.ts:
型
1.在主组件中,单击图标时打开弹出框:
main-component.ts:
型
使用此设置,当单击
ion-icon
时,将显示一个弹出框,其中包含来自ion-select
的选项。当用户从弹出框中选择一个选项时,PopoverComponent
中的selectShop()
方法将被调用,您可以在那里实现处理所选商店的逻辑。