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 /ラジオボタンがチェックされたとき、私はそれが私のionic2/angular2プロジェクトで動作させるためにそれで遊ぶことを試みてきたコンテンツを非表示に示しているAngular1で書かれました。しかし、それは働かなかった！

私はラジオボタンの後トグルコンテンツの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>