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

最新推荐文章于 2021-02-23 13:34:27 发布

chelen_jak

最新推荐文章于 2021-02-23 13:34:27 发布

阅读量554

点赞数

分类专栏： Ionic3 实用

实用同时被 2 个专栏收录

738 篇文章 4 订阅

订阅专栏

Ionic3

175 篇文章 1 订阅

订阅专栏

原文出处：https://blog.csdn.net/qq_41868796/article/details/88261697 (详情见原文）

前景介绍：

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

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

效果一：

下面是实现方法：

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