Ionic 离子:通过变量设置离子无线电的默认检查

olqngx59  于 2023-04-27  发布在  Ionic
关注(0)|答案(3)|浏览(136)

当前版本:简体中文
你好,这是我在stackoverflow上的第一个问题,所以如果有一些信息丢失,请原谅。
我尝试包含一个radio-group,它应该等于我的.ts-file的一个变量。我在两个页面之间传递一个'id',这样用户就不必总是重新选择它。
这就是我所尝试的,但我不能得到一个默认选择的单选按钮工作。

首页.页面.html:

<ion-radio-group (ionChange)="carChangeEvent($event)"  [(ngModel)]="car_id">

                        <ion-item>
                            <ion-label>Button 1</ion-label>
                            <ion-radio slot="start" value="1"></ion-radio>
                        </ion-item>

                        <ion-item>
                            <ion-label>Button 2</ion-label>
                            <ion-radio slot="start" value="2"></ion-radio>
                        </ion-item>

                        <ion-item>
                            <ion-label>Button 3</ion-label>
                            <ion-radio slot="start" value="3"></ion-radio>
                        </ion-item>

                    </ion-radio-group>

首页.页.ts:

export class HomePage {

    public car_id: string = "1";
    ...



    constructor(...) {...}

    carChangeEvent (event) {
        switch(this.car_id) { 
            case "1": { 
                ...do stuff by car_id...
            break; 
            } 
            case "2": {  
                ...do stuff by car_id...
            break; 
            }
            case "3": { 
                ...do stuff by car_id...
            break; 
            } 
            default: { 
                this.msg2 = "switch default";
                console.log('ERROR: Invalid car identifier: ' + event.target.value);
            break; 
            } 
        } 
    }

任何解决方案或提示?

**编辑1:**我也在我的设备上运行了它,并与ionic serve示例进行了比较,默认单选按钮显示正确。然而,当我在另一个页面上更改了值并返回home.page时,没有选择单选按钮(但值是正确的)。当我通过例如<ion-input [(ngModel)]="car_id">设置另一个值时,单选按钮根据输入值正确选择。

h22fl7wq

h22fl7wq1#

尝试将[value]="car_id"放入<ion-radio-group>标记中。

h7wcgrx3

h7wcgrx32#

我终于解决了这个问题。我在queryParams : 'NavigationExtras'中定义了一个错误的数据类型,所以switch/case无法输入正确的大小写。=〉一切都很好,工作正常。

rjee0c15

rjee0c153#

如果该函数不改变状态值,则不需要这些(click)事件。我们在测试中有一个示例radio组,它没有任何click事件:

<ion-list radio-group [(ngModel)]="gender">
    <ion-radio value="male">Male</ion-radio>
    <ion-radio value="female">Female</ion-radio>
</ion-list>

相关问题