如何在离子选择选项前添加国家标志图标？答案

【问题标题】：How to add country flags icon in front of ion-select-option?如何在离子选择选项前添加国家标志图标？
【发布时间】：2019-10-03 17:09:09
【问题描述】：

我正在创建 Ionic 4 plus Angular 应用程序，因为我正在使用国家/地区的 ion-select 下拉菜单。现在我想在国家名称前面添加国家标志图标。下面的代码显示了我正在尝试的内容。

<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>

【问题讨论】：

标签： angular7 ionic4

【解决方案1】：

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

这是example。

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

【讨论】：

【解决方案2】：

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

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

然后，例如将表情符号复制/粘贴到对象中（引号之间）：

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

我的应用示例：

【讨论】：