Angular2/Ionic2 - Inhalt umschalten, nachdem ein Optionsfeld ausgewählt wurde

Question

Ich habe 3 Optionsfelder, in denen ich einen bestimmten Inhalt anzeigen lassen möchte, wenn ich hier bin, hier ist mein Code, der die 3 Optionsfelder anzeigt:

<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> 

ich habe einen codepen geschrieben in Angular1 gefunden/versteckt Inhalt zeigt, wenn ein Optionsfeld Scheck, ich habe versucht, mit ihm zu spielen, um es in meinem ionic2/angular2 Projekt funktioniert; Es hat jedoch nicht funktioniert!

Ich habe auch festgestellt, einen Thread in StackOverflow für Toggle Inhalt nach einem Optionsfeld mit jQuery aktiviert ist aber ich war nicht glücklich genug, um es in meinem Projekt zu machen die Arbeit!

Können Sie bitte einige Lösungen zur Verfügung stellen?

Answer 1

Dies funktioniert basierend auf Ihrem Code. Sie benötigen [(ngModel)] im ion-list Tag.

<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>