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>