Ionic 角形离子图标绑定无法编译

uoifb46i  于 2022-12-08  发布在  Ionic
关注(0)|答案(2)|浏览(147)

我有一个<ion-select>的自定义版本,在该版本下我使用标准的<ion-select-option>

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

当我绑定这样的图标时

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

程式码会编译,而自订 Package 函数元件会负责将图标加入适当的位置。
但是当我这样绑的时候

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

出现错误无法绑定到“icon”,因为它不是“ion-select-option”的已知属性。
我需要后者,因为添加图标是有条件的。
示例:stackblitz link

dfddblmv

dfddblmv1#

ion-select-option没有icon属性,请检查docs
您可以创建自己的select组件并加载到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

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}`;
}
czq61nw1

czq61nw12#

我找到了一个解决办法,用attr.icon就管用:

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

我仍然不知道为什么它的工作,虽然离子选择选项没有图标属性正式。

相关问题