如何在 Ionic 2 的 select 组件中使用图像

Question

我正在尝试将图像放入 Ionic 2 的 Select 组件中：我已将图像源文件放入 Ionic 2 项目的 www/img 文件夹中。但是，使用简单的 img 标签不会使用此代码显示任何图像：

<ion-list>
  <ion-item>
    <ion-label>Gaming</ion-label>
    <ion-select [(ngModel)]="gaming">
      <ion-option value="nes">
        NES
        <img src="img/myImage.png">
      </ion-option>
    </ion-select>
  </ion-item>
</ion-list>

有人知道吗？

Answer 1

ion-select 组件不允许对自身进行直接自定义，您添加到 ion-select 和 ion-option 中的任何不符合 ionic 文档的内容都将是在生成的输出中忽略。

无法向组件添加 class 或样式。

一种方法是将 ion-select 放在父元素中，如 div 或 ion-row 等 class 并应用 CSS 规则使用 .parentclass childElement select 或.

要在选项中显示图像，请检查以下功能：

    prepareImageSelector() {
    setTimeout(() => {
        let buttonElements = document.querySelectorAll('div.alert-radio-group button');
        if (!buttonElements.length) {
            this.prepareImageSelector();
        } else {
            for (let index = 0; index < buttonElements.length; index++) {
                let buttonElement = buttonElements[index];
                let optionLabelElement = buttonElement.querySelector('.alert-radio-label');
                let image = optionLabelElement.innerHTML.trim();
                buttonElement.classList.add('imageselect', 'image_' + image);
                if (image == this.image) {
                    buttonElement.classList.add('imageselected');
                }
            }
        }
    }, 100);
}

我已经实现了颜色和图像 select 或使用 ion-select。请参考https://github.com/ketanyekale/ionic-color-and-image-selector

您也可以在

查看答案

Answer 2

在你的基础上，我想出了一个更简洁的方案！

方法'prepareImageSelector'作为控件的Click事件。

谢谢！

   image: string = 'English';
 
   prepareImageSelector() {
    setTimeout(() => {
      let buttonElements = document.querySelectorAll('div.alert-radio-group button');
      if (!buttonElements.length) {
        this.prepareImageSelector();
      } else {
        for (let index = 0; index < buttonElements.length; index++) {
          let buttonElement = buttonElements[index];
          let optionLabelElement = buttonElement.querySelector('.alert-radio-label');
          let image = optionLabelElement.innerHTML.trim();
          if (image == this.image) {
            optionLabelElement.innerHTML += '<img  src="assets/img/English.png" style="width:20px;height:20px;float:right;"/>';
          }
        }
      }
    }, 100);
  }

Answer 3

我是这样实现的

<ion-select (click)="loadFlags()" formControlName="pays"  value="select-country">           
    <ion-select-option  value="select-country" >select your country </ion-select-option>
    <ion-select-option *ngFor="let country of countries" value="{{country.name}}">{{country.name}}</ion-select-option>
</ion-select>

这是我的 .ts 文件

loadFlags() {
    setTimeout(function(){ 
     let radios=document.getElementsByClassName('alert-radio-label');
     for (let index = 1; index < radios.length; index++) {
        let element = radios[index];
        element.innerHTML=element.innerHTML.concat('<img class="country-image" 
       style="width: 30px;height:16px;" src="'+countries[index-1].flag+'" />');
      }
  }, 1000);
}

超时是让系统创建警报组件。我的 Json 是一个包含 {name:"Cameroon",flag:"https://restcountries.eu/data/cmr.svg"}

等元素的数组

如何在 Ionic 2 的 select 组件中使用图像

How to use images inside a select component in Ionic 2

ionic2

ionic2-select