如何在离子无线电元件上使用ngModel?

Sem*_*nto 13 javascript ecmascript-6 ionic-framework ionic2 angular

我正在尝试在离子无线电元素上实现ngModel但不知何故它不起作用.这是我的代码:

HTML

<ion-list radio-group>
    <ion-list-header>
        Unit
    </ion-list-header>

    <ion-item>
        <ion-label>Metric (kg)</ion-label>
        <ion-radio value="1" [(ngModel)]="unit"></ion-radio>
    </ion-item>

    <ion-item>
        <ion-label>Imperial (lbs)</ion-label>
        <ion-radio value="2" [(ngModel)]="unit"></ion-radio>
    </ion-item>
</ion-list>
Run Code Online (Sandbox Code Playgroud)

使用Javascript

import {Page} from 'ionic-angular';

@Page({
    templateUrl: 'build/pages/settings/settings.html'
})

export class Settings {
    constructor() {
        this.unit = 2;
    }
}
Run Code Online (Sandbox Code Playgroud)

我已经尝试在离子输入和离子选择上实现它,这只是工作正常.我也尝试添加directives: [FORM_DIRECTIVES]到我的@Page并添加相应的导入,但这不能解决问题.

有任何想法吗?

Pan*_*kar 27

语法已经改变改写现在,ngModel应该是地方与ion-list&radio-group只有一次.不需要在每个ion-radio元素上都有它们.

<ion-list radio-group [(ngModel)]="unit">
    <ion-list-header>
        Unit
    </ion-list-header>

    <ion-item>
        <ion-label>Metric (kg)</ion-label>
        <ion-radio value="1"></ion-radio>
    </ion-item>

    <ion-item>
        <ion-label>Imperial (lbs)</ion-label>
        <ion-radio value="2" ></ion-radio>
    </ion-item>
</ion-list>
Run Code Online (Sandbox Code Playgroud)

有关更多信息,请访问ionic2 framework 论坛链接

  • 这对Ionic 4仍然有效。谢谢! (6认同)