Ionic4 ion-radio 单选及Tab切换

效果图一：

3.gif

代码展示：

<ion-list radio-group   [(ngModel)]="selectValue" (ionChange)="langSelect()">
            <ion-list-header>
                选择语言
            </ion-list-header>
            <ion-item>
                <ion-label>Javascript</ion-label>
                <ion-radio checked="true" value="0"></ion-radio>
            </ion-item>
            <ion-item>
                <ion-label>Java</ion-label>
                <ion-radio value="1"></ion-radio>
            </ion-item>
            <ion-item>
                <ion-label>Python</ion-label>
                <ion-radio value="2"></ion-radio>
            </ion-item>
        </ion-list>
        <div class="langSelect0" *ngIf="selectValue=='0'">待付款</div>
        <div class="langSelect1" *ngIf="selectValue=='1'">已发货</div>
        <div class="langSelect2" *ngIf="selectValue=='2'">已完成</div>

ts

 langSelect() {
        console.log("langSelect: "+ this.selectValue);
    }

效果图二：

4.gif

html代码展示：

<ion-list radio-group   [(ngModel)]="selectValue" (ionChange)="langSelect()">
            <ion-list-header>
                选择语言
            </ion-list-header>
            <ion-item>
                <ion-label>Javascript</ion-label>
                <ion-radio checked="true" value="Javascript"></ion-radio>
            </ion-item>
            <ion-item>
                <ion-label>Java</ion-label>
                <ion-radio value="Java"></ion-radio>
            </ion-item>
            <ion-item>
                <ion-label>Python</ion-label>
                <ion-radio value="Python"></ion-radio>
            </ion-item>
        </ion-list>

ts

 langSelect() {
        console.log("langSelect: "+ this.selectValue);
    }

qq1.jpg