我正在尝试将图像放入Ionic 2中的Select
组件中:
我已将图像源文件放在Ionic 2项目的www/img
文件夹中。
但是,使用简单的img
- 标记不会使用此代码显示任何图像:
<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>
有没有人有任何想法?
答案 0 :(得分:3)
离子选择组件不允许直接定制到自身,并且您添加到离子选择和离子选项的任何内容(不是根据离子文档)将在生成的输出中被忽略。
您无法在组件中添加类或样式。
实现此目的的一种方法是将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
查看答案答案 1 :(得分:0)
在您的基础上,我制定了一个更简洁的解决方案!
方法'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);
}
答案 2 :(得分:0)
我是这样实现的。
<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+'" />');
}
}, 1000);
}
超时是为了让系统创建警报组件。我的Json是一个数组,其元素类似{name:“喀麦隆”,flag:“ https://restcountries.eu/data/cmr.svg”}