Show/Hide 基于 Ionic 3 中第一个 DropDownSelect 的第二个 DropDownSelect

Question

我是 ionic 的新手，我试图根据第一个下拉菜单的 selection 隐藏第二个下拉菜单。我的第一个下拉菜单 1.Bank 2.Cash 当我 select Bank Second DropDown 将被隐藏，而当 select 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);
}}

Answer 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;
   }
}

Answer 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>

Show/Hide 基于 Ionic 3 中第一个 DropDownSelect 的第二个 DropDownSelect

Show/Hide Second DropDownSelect Based on First DropDownSelect in Ionic 3

html

show-hide

typescript

dropdown

ionic3