如何在ion-select-选项前添加国旗图标？

Question

我正在创建 Ionic 4 plus Angular 应用程序，因为我正在使用 ion-select 下拉列表 country.now 我想在国家/地区前面添加国旗图标name.below 代码显示了我的尝试。

<ion-select class="dropdownselection" placeholder="PROVINCIA" interface="popover">
                  <ion-select-option value="A Coruña">
                    <ion-icon src="/assets/icons/man.svg"></ion-icon> A Coruña
                  </ion-select-option>
                  <ion-select-option value="Álava">Álava</ion-select-option>
                  <ion-select-option value="Albacete">Albacete</ion-select-option>
                  <ion-select-option value="red">D</ion-select-option>
                </ion-select>

Answer 1

我知道在 Ionic 3 中没有可靠的方法来添加图标。我不确定 Ionic 4，但我使用 this plugin 并且它很棒。

这是一个example.

此插件的另一个巨大好处是您可以异步搜索大量数据。

Answer 2

旧，但如果有人需要，您可以使用国旗表情符号的 unicode（您可以找到列表 here）。

确保您使用的是 UTF-8 作为元字符集。

然后，copy/paste 例如，对象中的表情符号（引号之间）：

最后，在模板中使用属性 {{ myObject.flagIcon }}。

来自我的应用程序的示例：

如何在ion-select-选项前添加国旗图标？

How to add country flags icon in front of ion-select-option?

ionic4

angular7