首页 文章

如何在运行时显示或隐藏离子场/组件，具体取决于ion-select上选择的选项

提问于
浏览 次
0

在我正在制作的应用程序中，我需要向用户呈现一些内容，具体取决于在离子选择 in the same page 上选择的选项 . 波纹管snipet是实际列表的说明：

<ion-item no-lines>
    <ion-label>Options</ion-label>
    <ion-select formControlName="option">
        <ion-option *ngFor="let option of options">
            {{ option }}
        </ion-option>
    </ion-select>
</ion-item>

在这种情况下，如果选择了其中一个选项，比如“选项B”，那么我希望将另一个选项列表呈现给用户以供选择：

<ion-item no-lines>
    <ion-label>Sub options of B</ion-label>
    <ion-select formControlName="subOptionOfB">
        <ion-option *ngFor="let subOption of subOptions">
            {{ subOption }}
        </ion-option>
    </ion-select>
</ion-item>

在这种情况下， only B有'power'在页面上触发此更改，但这里是catch：如果用户选择 B ，则应显示子列表;如果它选择另一个选项，它应该 disappear ，或者，如果它还没有渲染，不会在页面上引起任何反应，因为它有动态感觉 .

在我的搜索中，我遇到了类似的问题，这些问题已通过 ngIf 或 hidden 属性解决 . 我试过但没有成功： ngIf only ，组件 still shows 当 should disappear ;随着 hidden attribute only ，它消失了 only when rendering ，之后没有任何变化（如果组件被渲染为'invisible'，而不是那样停留并且不再显示;如果它被渲染为'visible'，那么保持这种方式并且不再消失）;使用两者都会产生与仅使用隐藏属性时相同的问题 .

我有一种感觉，这与异步请求有关，因为几个月前我在学习Java时，我在制作网页时学到了类似的东西 . 使用异步请求我可以根据情况放置和/或取出内容，而无需刷新页面（这正是我需要的），但我无法绕过Observables等等 .

有人可以告诉我我需要做什么，或者至少，我做错了什么？

[编辑1]：我不知道这是否会改变，但我使用formControlName代替[（ngModel）]进行数据绑定 .

两个列表都在同一级别和 not nested . 每个人都在各自的离子项目中 .

我正在使用带有Angular 2和TypeScript的Ionic 2 .

angular ionic2

1 回答

  • 0

    这只是一个简单的案例 . 尝试并调整您的代码以适应我在下面提供的代码段 .

    在您的HTML页面中

    ...
<ion-item no-lines>
    <ion-label>Options</ion-label>
    <ion-select formControlName="option" (ionChange)="onSelectChangeOption()" submitText="Ok" cancelText="Cancel">
        <ion-option *ngFor="let option of options">
            {{ option }}
        </ion-option>
    </ion-select>
</ion-item>

<ion-item no-lines  *ngIf="showSubOptionOfB">
    <ion-label>Sub options of B</ion-label>
    <ion-select formControlName="subOptionOfB">
        <ion-option *ngFor="let subOption of subOptions">
            {{ subOption }}
        </ion-option>
    </ion-select>
</ion-item>
...

    然后是你的打字稿页面

    ....

  showSubOptionOfB:boolean = false; //default

  onSelectChangeOption() {

    //grab form value
    let optionValue = this.yourForm.get('option').value;

    //show subOptions
    if(optionValue == "B"){
        this.showSubOptionOfB = true;
    }
    else{
        this.showSubOptionOfB = false;
    }
      }


  //say you declared your formgroup as yourForm    
  public yourForm = this.formBuilder.group({
    option: ["", Validators.required],
    subOptionOfB: ["", Validators.required],
    ...   
    });

  ...
    回复于

相关问题