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編寫的編解碼器，它在檢查單選按鈕時顯示/隱藏內容，我試圖用它來使它在我的ionic2 / angular2項目中工作; 然而，它沒有奏效！

在使用jQuery檢查單選按鈕后，我還在StackOverflow中找到了一個用於切換內容的線程但是我沒有幸運能夠在我的項目中使用它！

你能提供一些解決方案嗎？

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>