如何在IONIC 4的离子选择中显示图像和文本

Question

我想在选择离子时显示一个国家标志和名称。该图像未显示在选项中。

该怎么办？

仅此图像而不是国家/地区代码：

。html

<ion-list >
  <ion-item>
    <ion-label>Choose Country</ion-label>
    <ion-select  placeholder="Country" value="1" #countryList (ionChange)="chooseCountry()" [(ngModel)]="userCountry">
      <ion-select-option *ngFor="let item of optionsArray" value="{{item.id}}">
        {{item.name}}
        <img class="flag" [src]='item.flag'>
      </ion-select-option>
    </ion-select>
  </ion-item>
</ion-list>

Answer 1

不可能在ion-select-option中添加图像，但是您可以通过::自己实现相同的操作：>

1. 创建页面并使用ngfor并在其中创建普通的离子列表每个项目都将图像和文本放在离子项目中。
2. 以模态形式打开此页面，并在golobsl中提供此模态定制css.scss文件作为常规选择警报，例如（width：450px; height：350px;）。
3. 当您打开将包含图像的模式发送数组或模态打开时请求的api链接。
4. 获取与navParams一起发送的模态的道具，这样，您将确切地得到您想要的。

有关更多信息，请写评论，并随时与您在一起。