基于 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 插件的使用方法

填充顶部在 ionic 3 中不起作用

基于 Ionic 4 选项卡的应用程序中的多个侧边菜单

帮助将 DropDown 事件更改为单选按钮触发器 - javascript

Ionic 3:在“prod”模式下构建:找不到模块“。”

基于共同的第一个元素合并二维列表中的元素