Ionic PickerController 能够显示图像/图标吗?
Ionic PickerController able to display images / icons?
所以我制作了一个简单的选择器控制器来显示一些信息。
我的问题是是否可以在此处显示文本值的图像。
例如,我想用我的资产文件夹中的图像替换 item1、item2 等以下图像。
Picker 使用名为 "text" 的字符串来显示文本的值。
for (const d of this.Fridge){
newInputs.push({
text: d.text, //I want text: to display an image instead of a string
value: {
//Value I will get from selected item
},
checked: false
})
}
async openPicker() {
var newInputs = [];
//Parse through all memebers in the loaded array from Firestore
for (const d of this.Fridge){
newInputs.push({
text: d.text, //I want text: to display an image instead of a string
value: {
//Value I will get from selected item
},
checked: false
})
}
const picker = await this.pickerCtrl.create({
buttons: [
{
text: 'Cancel',
handler: data => {
console.log('Cancel');
//update values here
}
},
{
text: 'Done',
handler: data => {
console.log('Done');
//update values here
}
},
],
columns: [
{
name: '',
options: newInputs
},
],
});
await picker.present();
}
我认为这不可能。相反,您可以做的是使用模态组件创建自定义选择器并使用离子列表显示图像和文本。
<ion-list>
<ion-item *ngFor="let item of items">
<ion-thumbnail slot="start">
<ion-img [src]="item.src"></ion-img>
</ion-thumbnail>
<ion-label>{{item.text}}</ion-label>
</ion-item>
</ion-list>
所以我制作了一个简单的选择器控制器来显示一些信息。
我的问题是是否可以在此处显示文本值的图像。
例如,我想用我的资产文件夹中的图像替换 item1、item2 等以下图像。
Picker 使用名为 "text" 的字符串来显示文本的值。
for (const d of this.Fridge){
newInputs.push({
text: d.text, //I want text: to display an image instead of a string
value: {
//Value I will get from selected item
},
checked: false
})
}
async openPicker() {
var newInputs = [];
//Parse through all memebers in the loaded array from Firestore
for (const d of this.Fridge){
newInputs.push({
text: d.text, //I want text: to display an image instead of a string
value: {
//Value I will get from selected item
},
checked: false
})
}
const picker = await this.pickerCtrl.create({
buttons: [
{
text: 'Cancel',
handler: data => {
console.log('Cancel');
//update values here
}
},
{
text: 'Done',
handler: data => {
console.log('Done');
//update values here
}
},
],
columns: [
{
name: '',
options: newInputs
},
],
});
await picker.present();
}
我认为这不可能。相反,您可以做的是使用模态组件创建自定义选择器并使用离子列表显示图像和文本。
<ion-list>
<ion-item *ngFor="let item of items">
<ion-thumbnail slot="start">
<ion-img [src]="item.src"></ion-img>
</ion-thumbnail>
<ion-label>{{item.text}}</ion-label>
</ion-item>
</ion-list>