Question

在我正在制作的应用中，我需要向用户呈现一些内容，具体取决于在同一页面中选择选项时选择的选项。波纹管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>

在这种情况下，仅 B具有触发页面上此更改的“权力”，但这里有一个问题：如果用户选择 B ，应出现子列表;如果它选择另一个选项，它应该消失，或者，如果它还没有渲染，则不会引起页面上的任何反应，因为它有动态的感觉。

在我的搜索中，我遇到了类似的问题，这些问题已通过 ngIf 或隐藏属性解决。我尝试了这些但没有成功：只有 ngIf ，当消失时，组件仍会显示;只有隐藏属性时，只有在渲染时它才会消失，之后没有任何变化（如果组件被渲染为'隐形'，那么就会停留在那里并且不再显示;如果它被呈现为“可见的”，那么就会保持这种状态并且不再消失了）;使用两者都会产生与仅使用隐藏属性时相同的问题。

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

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

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

两个列表都在同一级别，没有嵌套。每个人都在各自的离子项目中。

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

Answer 1

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

在你的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],
    ...   
    });

  ...

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

1 个答案: