ionic2 - Ionic - 如何在离子选择上显示 [selectOptions] 中定义的自定义按钮?
问题描述
我正在尝试通过在 [selectOptions] 中传递选项来定义离子选择上的自定义按钮,如下所示:
HTML:
<ion-select [(ngModel)]="selectedSkypeUser" [selectOptions]="getSelectOptions()">
<ion-option *ngFor="let user of skypeUsers" [value]="user.name">
{{user.name}}
</ion-option>
</ion-select>
TS:
private skypeUserButtons = {
title: "Skype users",
subTitle: "Select the user you want to change",
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => {}
},
{
text: 'Delete',
handler: () => {
this.deleteSkypeUser();
}
},
{
text: 'Add new user',
handler: () => {
this.addSkypeUser();
}
}
]
};
getSelectOptions() {
return this.skypeUserButtons;
}
标题和子标题显示正常,但按钮只是默认按钮。我究竟做错了什么?我该如何解决?
谢谢!
解决方案
这并没有完全回答这个问题,但它实际上是一种有效的解决方法。(也许是目前唯一的解决方案)。
我刚刚创建了一个触发弹出窗口的简单按钮,但这可以是一个样式看起来像常规选择的元素,并显示所选选项或您想要的任何内容:
HTML:
<button ion-button icon-left round (click)="showUserDialog()">
Edit users
</button>
TS:
showUserDialog() {
let inputs = [];
let users = this.skypeUsers;
users.forEach(user => {
inputs.push({
type: 'radio',
label: user.name,
value: user.name
});
});
let alert = this.alertCtrl.create({
title: "Select user",
inputs,
buttons: [
{
text: 'Cancel',
role: 'cancel'
},
{
'Delete',
handler: data => {
// data == selected user.name (value)
}
}
},
{
text: 'Add new user',
handler: () => {
// Trigger logic to add new user
this.createNewUser()
// Return true to close the alert - false to keep it open
return true;
}
}]
});
alert.present();
}
推荐阅读
- python - 检查用户输入的 IP 地址是否有效
- flutter - 如何知道流是否已更改(已添加某些内容)
- xml - 需要用值中的空格替换下划线
- material-ui - 如何仅导入组件的类?
- python - 如何在 Python 中使用 tqdm 打印单行进度条?
- while-loop - 如何打印存储在缓冲区中的消息?
- javascript - 将自定义 CSS 添加到导航选项卡向导
- laravel - 使用 laravel 集合将键转换为项目
- python - 不同的日志:local VS docker (local) vs docker SWARM
- python - 根据 PyCharm 暗/亮模式的暗/亮 matplotlib 样式