是否可以在离子选择中将图标添加到离子选项？ 像
<ion-select name="type">
<ion-option value="bar"><ion-icon name="stats"></ion-icon>Bar</ion-option>
<ion-option value="pie"><ion-icon name="pie"></ion-icon>Pie</ion-option>
</ion-select>
【问题讨论】：
标签： ionic-framework ionic2 ionic3
IonSelect 中的 IonIcons：
离子选择选项只返回字符串，但是，离子选择在技术上所做的只是显示一个看起来像下拉列表的界面。
简而言之，在此示例中，您可以做的是，通过将下拉列表放在可点击的 ion-item 中，禁用下拉列表，使其看起来已启用（例如UX），单击 ion-item 时单击下拉菜单，然后使用该引用在该位置打开一个弹出组件。
所以，我在这样做时做了一些考虑：
我不想重新创建下拉框和图标，我只想更改它显示的内容
我还希望图标可以点击
我最终得到的解决方案（注意这也是使用 ReactiveForms）：
menu-options.interface.ts
export interface MenuOptions {
key: string;
fn: () => {};
}
MenuOptions 将保存按下按钮时要显示的值和要运行的函数
main.component.ts
constructor(private cd: ChangeDetectorRef){}
menuOptions: MenuOptions[] = [
{
key: "Text",
fn: () =>
this._showAlert("Select this option if you want to type in values"),
},
{
key: "List",
fn: () =>
this._showAlert(
"Select this option if you want to use a pre-defined list of values"
),
},
{
key: "Textbox",
fn: () =>
this._showAlert(
"Select this option if you want an area to type a block of text"
),
},
];
// Find location of where popover is to appear and click the element
// which will then trigger the (click) event
onSelectionClick(event: any) {
let element: HTMLElement = document.getElementById('popoverLoc') as HTMLElement;
element.click();
}
async openPopover(event: any) {
const popover = await this.popover.create({
component: SelectionTypePopoverComponent,
componentProps: {
menuOptions: this.menuOptions
},
event,
translucent: true,
});
await popover.present();
const {data} = await popover.onWillDismiss();
// Get return from popover and set selection value
this.itemFeatureForm.get('selectionType').setValue(data['selectionType']);
// If you hardcode the menu options directly in the popover component and pass them back
// you will need to trigger change detection manually and set array to have 1 value
// otherwise your dropdown wont appear properly
// menuOptions: MenuOptions[] = [{ key: '', fn: () => '' }]
//this.cd.detectChanges();
}
main.component.html
<ion-item button (click)="onSelectionClick($event)" detail="false">
<ion-label class="enableItem">Selection Type</ion-label>
<ion-select
formControlName="selectionType"
class="enableItem"
id="popoverLoc"
(click)="openPopover($event)"
>
<ion-select-option
*ngFor="let option of menuOptions"
[value]="option.key"
>{{ option.key }}</ion-select-option
>
</ion-select>
</ion-item>
将 Ion-Label/Ion-Select 包裹在可点击的 Ion-Item 中。这将是注册第一次点击的内容。
确保您的离子选择已禁用：selectionType: new FormControl({value: '', disabled: true}),
enableItem 类使您的 Ion-Select 看起来启用：.enableItem {opacity: 1 !important;}
设置id来标记离子选择的位置
popover.component.html
<ion-list>
<div *ngFor="let option of menuOptions; let i = index">
<ion-grid class="ion-no-padding">
<ion-row class="ion-no-padding">
<ion-col class="ion-no-padding">
<ion-item button detail="false" (click)="onSelection(i)">
<ion-label>{{ option.key }}</ion-label>
</ion-item>
</ion-col>
<ion-col class="ion-no-padding" size="2">
<ion-item class="ion-no-padding">
<ion-button class="ion-no-padding" fill="clear" (click)="onInfo(i)">
<ion-icon
name="information-circle-outline"
slot="icon-only"
></ion-icon>
</ion-button>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-list>
一定要设置图标栏的大小
popover.component.ts
onSelection(index: number) {
this.popoverCtrl.dismiss({
selectionType: this.menuOptions[index].key,
});
}
onInfo(index: number) {
this.menuOptions[index].fn();
}
我还没有在物理设备上进行过测试，但是当我这样做时，如果这不起作用，我会更新，但目前，通过这种模式，我可以制作任何我想出现在下拉列表中的内容，并且仍在使用离子模板...强大的力量、责任感等等。
【讨论】：
嘿，你可以试试这个...
这对我有用.. 看看这个网站： https://www.alt-codes.net/star_alt_code.php
我使用了这个代码：✰
所以我的代码看起来像这样：
<ion-item>
<ion-label>Member's Overall Rating</ion-label>
<ion-select [(ngModel)]="newreport.memberstatus">
<ion-option value="✰">✰</ion-option>
<ion-option value="✰✰">✰✰</ion-option>
<ion-option value="✰✰✰">✰✰✰</ion-option>
<ion-option value="✰✰✰✰">✰✰✰✰</ion-option>
<ion-option value="✰✰✰✰✰">✰✰✰✰✰</ion-option>
</ion-select>
</ion-item>
结果是这样的（我手机上的截图导致我在手机上测试）：
【讨论】：
Ionic 不支持此功能。 See comment from Kensodeman on this issue
所以我想只有 Luis 建议的某种解决方法才有可能。
【讨论】：
这对我有用。
使用 CSS 修改每个选项按钮标签中的内部跨度，去除半径并分配背景图像
选项保持相同的顺序，这就是属性选择器对我有用的原因
.alert-radio-icon{
border-radius: 0 !important;
border: none !important;
height: 40px !important;
width: 40px !important;
background-size: 40px 40px !important;
background-repeat: no-repeat ;
}
[id^="alert-input-"][id$="-0"] .alert-radio-icon{
background-image: url("../assets/images/menu/flag_ni.png") !important;
}
[id^="alert-input-"][id$="-1"] .alert-radio-icon{
background-image: url("../assets/images/menu/flag_gt.png") !important;
}
.alert-radio-inner{
background-color: transparent !important;
}
【讨论】：
我能想到的最好的办法是使用 unicode 字符作为 ion-option 内容。喜欢这个：?
【讨论】：