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> 

我发现一个codepen写在Angular1，显示/隐藏在一个单选按钮是检查，我试着玩它，使之在我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>