如何在Ionic 2中的选择组件内使用图像

Question

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

<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放在父元素（如div或ion-row等）中，并使用.parentclass childElement选择器应用CSS规则。

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

    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);
}

我已经使用离子选择实现了颜色和图像选择器。请参考https://github.com/ketanyekale/ionic-color-and-image-selector

您也可以在Ionic select input of colours查看答案

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);
  }