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，当一个单选按钮被选中时 shows/hides 的内容，我试着用它来让它在我的 ionic2/angular2 项目;但是，它没有用！

我还在中找到了关于 使用 jQuery[= 检查单选按钮后切换内容的话题25=] 但我没有足够幸运让它在我的项目中发挥作用！

能否提供一些解决方案？

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>

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

Angular2/Ionic2 - Toggle content after a radio button is checked

ionic2

angular