How add image for Ion-select list (如何为Ion-select列表添加图片)

Myth丶恋晨 2022-01-15 00:59 74阅读 0赞

原文出处：[https://blog.csdn.net/qq\_41868796/article/details/88261697][https_blog.csdn.net_qq_41868796_article_details_88261697] (详情见原文）

前景介绍：

上帝说：“要有光”，于是便从此有了光。

产品经理说：“语言列表需要加对应国籍的图片，便于识别”，于是，便有了这篇文章!

效果一：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70][]

下面是实现方法：

html

<ion-header>
      <ion-navbar>
        <ion-title>Home</ion-title>
      </ion-navbar> 
    </ion-header>
    
    <ion-content padding>
      <ion-item>
          <ion-label>语言</ion-label>
          <ion-select (click)="OpenLanguage()" [(ngModel)]="defouleLang">
            <ion-option *ngFor="let lang of language" value="{
       {lang}}">{
       {lang}}</ion-option>
          </ion-select>
      </ion-item>
    </ion-content>

import { Component } from '@angular/core';
    import { NavController } from 'ionic-angular';
    
    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    
    export class HomePage {
    
      language: any = [];
      defouleLang: string = "";
    
      constructor(public navCtrl: NavController) {
        this.language = ["Chinese-S", "Chinese-T", "English", "Japanese"];
        this.defouleLang = this.language[0];
      }
     
    
      OpenLanguage() {
        setTimeout(() => {
          //根据类样式"div.alert-radio-group button"获取html元素
          let buttonElements = document.querySelectorAll('div.alert-radio-group button');
    
          //判断获取到的元素是否非null
          if (!buttonElements.length) {
            //为空，则重新获取      
            this.OpenLanguage();
          } else {
            //不为空则循环遍历该获取到的html元素（即遍历AlertController列表的信息所在html元素）
            for (let index = 0; index < buttonElements.length; index++) {
              //根据下标取html元素
              let buttonElement = buttonElements[index];
    
              //然后根据html元素，取列表中的信息
              let optionLabelElement = buttonElement.querySelector('.alert-radio-label');
              let image = optionLabelElement.innerHTML.trim();
              //拼接图片名称显示图片，注意图片命名，须与绑定字段一致，则为该元素添加Image   
              optionLabelElement.innerHTML += '<img  src="assets/imgs/language/' + image + '.jpg" style="width:20px;height:20px;float:right;margin-right: 15px;"/>';
            }
          }
        }, 100);
      }
    }

*下面是全部代码的下载连接*

[https://download.csdn.net/download/qq\_41868796/11008229][https_download.csdn.net_download_qq_41868796_11008229]

[https_blog.csdn.net_qq_41868796_article_details_88261697]: https://blog.csdn.net/qq_41868796/article/details/88261697
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70]: /images/20220114/17fb861557d443e488fcadf32c9e36bc.png
[https_download.csdn.net_download_qq_41868796_11008229]: https://download.csdn.net/download/qq_41868796/11008229