基于 Ionic 3 中的第一个 DropDownSelect 显示/隐藏第二个 DropDownSelect
Posted
技术标签:
【中文标题】基于 Ionic 3 中的第一个 DropDownSelect 显示/隐藏第二个 DropDownSelect【英文标题】:Show/Hide Second DropDownSelect Based on First DropDownSelect in Ionic 3 【发布时间】:2018-08-17 16:53:14 【问题描述】:我是 ionic 方面的新手,我正在尝试根据第一个下拉列表的选择隐藏第二个下拉列表。 我的第一个下拉菜单 1.银行 2.现金 When i select Bank Second DropDown will be hidden and when select Cash then it will show second DropDown.
.html 文件
<ion-list no-lines>
<ion-item>
<ion-label>Payment Mode</ion-label>
<ion-select [(ngModel)]="paymentmode" (ionChange)="paymentModeChosen()">
<ion-option [value]="paymentmode" *ngFor="let paymentmode of
paymentmodes()">paymentmode</ion-option>
</ion-select>
</ion-item>
<ion-item *ngIf="paymentlocations">
<ion-label>Payment Location</ion-label>
<ion-select [(ngModel)]="paymentlocation"
(ionChange)="paymentLocationChosen()">
<ion-option [value]="paymentlocation" *ngFor="let paymentlocation of
paymentlocations()">paymentlocation</ion-option>
</ion-select>
</ion-item>
</ion-list>
.ts 文件
paymentmodes(): string[]
return [
"Bank",
"Cash"
];
paymentmode: string = "Bank";
paymentlocations(): string[]
return [
"Ahmadabad",
"Chennai",
"Delhi",
"Kolkata",
"Mahad",
"Mumbai",
"Pune",
"Roha",
"Sahibabad"
];
paymentlocation: string = "Ahmadabad";
constructor(public navCtrl: NavController, public navParams: NavParams)
paymentModeChosen(): void
console.log(this.paymentmode);
paymentLocationChosen():void
console.log(this.paymentlocation);
【问题讨论】:
【参考方案1】:在您的 .html 文件中
<ion-list no-lines>
<ion-item>
<ion-label>Payment Mode</ion-label>
<ion-select [(ngModel)]="paymentmode" (ionChange)="paymentModeChosen($event)">
<ion-option [value]="paymentmode" *ngFor="let paymentmode of
paymentmodes()">paymentmode</ion-option>
</ion-select>
</ion-item>
<ion-item *ngIf="showPaymentLocation"> // decide whether to show or hide
<ion-label>Payment Location</ion-label>
<ion-select [(ngModel)]="paymentlocation"
(ionChange)="paymentLocationChosen()">
<ion-option [value]="paymentlocation" *ngFor="let paymentlocation of
paymentlocations()">paymentlocation</ion-option>
</ion-select>
</ion-item>
</ion-list>
// 在你的 .ts 文件中
showPaymentLocation: boolean = false;
constructor(public navCtrl: NavController, public navParams: NavParams)
paymentModeChosen(paymentmodeName): void
if(paymentmodeName == 'Bank')
this.showPaymentLocation = false;
else
this.showPaymentLocation = true;
【讨论】:
如果它工作正常,那么你应该接受答案【参考方案2】:.ts 文件的变化
在 .ts 文件中创建新变量
public paymentL = true;
然后修改这个函数
paymentModeChosen(): void
console.log(this.paymentmode);
if(this.paymentmode == 'Cash')
this.paymentL = false;
else
this.paymentL = true;
html文件的变化
在 html 文件 ngif "paymentL" 中,如果 paymentL 为 "Cash",则此 ion-item 不可见,如果为 "Bank",则 ion-item 可见。
<ion-item *ngIf="paymentL">
<ion-label>Payment Location</ion-label>
<ion-select [(ngModel)]="paymentlocation"
(ionChange)="paymentLocationChosen()">
<ion-option [value]="paymentlocation" *ngFor="let paymentlocation of
paymentlocations()">paymentlocation</ion-option>
</ion-select>
</ion-item>
【讨论】:
以上是关于基于 Ionic 3 中的第一个 DropDownSelect 显示/隐藏第二个 DropDownSelect的主要内容,如果未能解决你的问题,请参考以下文章
Primeng UI框架ionic3 中下拉选择插件p-dropdown 插件的使用方法