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

Question

在我正在制作的应用程序中，我遇到一种情况，我需要根据在同一页面的离子选择中选择的选项向用户呈现一些内容。波纹管狙击手是实际列表的插图：

<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时，我在制作网页时学到了类似的东西。使用异步请求，我可以根据情况放置和/或取出内容，而无需刷新页面(这正是我所需要的)，但我无法围绕可观察量等进行思考。

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

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

两个列表位于同一级别，而不是嵌套。每个都在各自的离子项目中。

我正在使用Ionic 2和Angular 2和TypeScript。

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