角离子图标结合不编译

Question

我有一个自定义版本的＆lt; ion-select＆gt;我使用标准＆lt; ion-select-option＆gt;。

<custom-select>
    <ion-select-option></ion-select-option>
</custom-select>

当我像这样绑定图标时，

<ion-select-option value="test" icon="information-circle">
    Test
</ion-select-option>

代码编译，自定义包装器组件会在适当的位置添加图标。

但是，当我这样绑定时，

<ion-select-option value="test" [icon]="getIcon()">Test2</ion-select-option>

我会得到错误无法绑定到“图标”，因为它不是“离子 - 选择选项”的已知属性。

我需要后者，因为添加图标是有条件的。

示例： stackblitz链接

Answer 1

ion-select-option没有iCON属性，检查 docs

您可以创建自己的选择组件并加载到 popover

例如

component.html

...
<ion-list>
    <ion-item (click)="selectItem('test')">
        <ion-icon slot="end" name="logo-ionic"></ion-icon>
        <ion-label>Test</ion-label>
    </ion-item>
</ion-list>
...

component.ts

...
constructor(public popoverController: PopoverController) {}

selectItem(val) {
    this.popoverController.dismiss(val);
}
...

home.ts home.ts

async presentPopover(e: Event) {
    const popover = await this.popoverController.create({
      component: PopoverComponent,
      event: e
    });

    await popover.present();

    const { role } = await popover.onDidDismiss();
    this.roleMsg = `Popover dismissed with role: ${role}`;
}

Answer 2

我找到了一个解决方案，使用attr.icon工作：

<ion-select-option
  value="test2"
  attr.icon="{{ 1===1 ? 'information-circle' : null }}"
>
  Test2
</ion-select-option>

我仍然不知道为什么它有效，尽管离子选择选项没有正式具有ICON属性。