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

Question

我尝试将 Ionic-3 选择列表放在图像图标中，但它不起作用，有人知道如何正确执行此操作吗？

\n\n

这是我的代码

\n\n

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

\n

Answer 1

我可以使用这个 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);
}