![](/img/trans.png)
[英]Ionic / Angular ion-item with button click to select hide selected ion-item
[英]Ionic v4.12 ion-picker can not find any way to handle item selected change of a column
我在 ionic V4.12 中使用 ion-picker 組件,我有 3 列。 當我選擇第一列的一個項目時,我需要過濾第二列的項目,但我找不到任何方法來解決我的問題
我發現 PickerColumn 有刷新功能,但還是不行
import { PickerController } from '@ionic/angular';
@Component({
...
})
export class ComponentPage {
constructor(public pickerCtrl: PickerController) { }
async openPicker() {
const picker = await this.pickerCtrl.create({
buttons: [{
text: 'Done',
}],
columns: [
{
name: 'days',
options: [
{
text: '1',
value: 1
},
{
text: '2',
value: 2
},
{
text: '3',
value: 3
},
]
},
{
name: 'years',
options: [
{
text: '1992',
value: 1992
},
{
text: '1993',
value: 1993
},
{
text: '1994',
value: 1994
},
]
},
]
});
await picker.present();
}
}
當我在 days 列中選擇 1 時,我只想顯示名為 1994 的項目。
我向 IONIC TEAM 提出請求,答案是聽 ionPickerColChange Even
picker.addEventListener('ionPickerColChange', async (event: any) => {
here handle some logic
}
您可以像這樣收聽 onDidDismiss 方法:
async openPicker() {
const picker = await this.pickerCtrl.create({
buttons: [{
text: 'Done',
}],
columns: [
{
name: 'days',
options: [
{
text: '1',
value: 1
},
{
text: '2',
value: 2
},
{
text: '3',
value: 3
},
]
},
{
name: 'years',
options: [
{
text: '1992',
value: 1992
},
{
text: '1993',
value: 1993
},
{
text: '1994',
value: 1994
},
]
},
]
});
picker.onDidDismiss().then(({data}) => console.log(data.years.value));
await picker.present();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.