我是 ionic 的新手,我试图根据第一个下拉菜单的选择隐藏第二个下拉菜单。 我的第一个下拉菜单 1.银行 2.现金 当我选择 Bank 时,第二个 DropDown 将被隐藏,而当我选择 Cash 时,它将显示第二个 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);
}}
最佳答案
.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>
关于html - 基于 Ionic 3 中的第一个 DropDownSelect 显示/隐藏第二个 DropDownSelect,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49188311/