Angular2/Ionic2 - 选中单选按钮后切换内容

Question

我有 3 个单选按钮，一旦选中其中一个，我想在其中显示特定内容，目前这里是我的代码，显示了 3 个单选按钮：

 <ion-list radio-group>
    <ion-item class="listItems">
        <ion-label>Option 1</ion-label>
        <ion-radio checked="false" value="Option1"></ion-radio>
    </ion-item>

    <ion-item class="listItems">
        <ion-label>Option 2</ion-label>
        <ion-radio checked="false" value="Option2"></ion-radio>
    </ion-item>

    <ion-item class="listItems">
        <ion-label>Option 3</ion-label>
        <ion-radio checked="false" value="Option3"></ion-radio>
    </ion-item>
    </ion-list>

我发现了一个用 Angular1 编写的codepen，它在选中单选按钮时显示/隐藏内容，我尝试使用它使其在我的 ionic2/angular2 项目中工作；但是，它没有用！

我还在StackOverflow 中找到了一个线程，用于在使用 jQuery 检查单选按钮后切换内容，但我没有足够的运气让它工作我的项目！

您能提供一些解决方案吗？

Answer 1

这取决于您的代码。您需要在ion-list 标签中添加[(ngModel)]。

<ion-list radio-group [(ngModel)]="content" >
    <ion-item class="listItems">
        <ion-label>Option 1</ion-label>
        <ion-radio checked="false" value="Option1"></ion-radio>
    </ion-item>

    <ion-item class="listItems">
        <ion-label>Option 2</ion-label>
        <ion-radio checked="false" value="Option2"></ion-radio>
    </ion-item>

    <ion-item class="listItems">
        <ion-label>Option 3</ion-label>
        <ion-radio checked="false" value="Option3"></ion-radio>
    </ion-item>
    </ion-list>
    <h *ngIf="content=='Option1'"> Option 1</h>
    <h *ngIf="content=='Option2'"> Option 2</h>
    <h *ngIf="content=='Option3'"> Option 3</h>