Question

我试图将Ionic-3选择列表放入图像图标但不起作用，有人知道如何正确地做到这一点吗？

这是我的代码

 <ion-item >
      <ion-label><p class="ion-lbl">Country</p></ion-label>
      <ion-select [(ngModel)]="Country">
          <option value="AF"><ion-img width="20" height="20" src="/assets/imgs/afg-icon.png"></ion-img> Afghanistan </option>
        <option value="AX">Åland Islands</option>
        <option value="AL">Albania</option>
        <option value="YE">Yemen</option>
        <option value="ZM">Zambia</option>
        <option value="ZW">Zimbabwe</option>


      </ion-select>
    </ion-item>

Answer 1

首先，使用<ion-select>代替<select>

Unfurtonaltely，它很难在离子选择中添加图像。它从here

接收了一个重复的问题

Answer 2

我可以使用此CSS选择器来归档类似的内容：

您现在需要按顺序选择选项，并为每个选项创建一个CSS选择器，以处理静态数据！

这是HTML部分：

<ion-select #flagSelect
    [(ngModel)]="selectedLang"
    (ionChange)="onLanguageChange()">
    <ion-option *ngFor="let lang of langs"
        [value]="lang">
        {{lang.name}}
    </ion-option>
</ion-select>

数组langs是静态的，就像这样：

var langs = [
    { code: '', name: 'English', flagName: 'gb' },
    { code: 'pt', name: 'Portuguese (Brazil)', flagName: 'pt_BR' },
    { code: 'es', name: 'Espanhol', flagName: 'es' }
];

由于我的数组是静态的，因此我可以为每个离子选项定义css：

.alert-radio-group button:nth-child(1) .alert-radio-label:before {
    content: url(/assets/imgs/flags/gb.png);
}

.alert-radio-group button:nth-child(2) .alert-radio-label:before {
    content: url(../assets/imgs/flags/pt_BR.png);
}

.alert-radio-group button:nth-child(3) .alert-radio-label:before {
    content: url(../assets/imgs/flags/es.png);
}

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+'" />');
          }
      }, 2000);

  }

我的Json是一个数组，其中包含{name：“喀麦隆”，标志：“ https://restcountries.eu/data/cmr.svg”}

离子选择列表添加图像图标不起作用

3 个答案: