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

How can I use a ngModel on an ion-radio element?(如何在离子无线电元件上使用 ngModel?)
本文介绍了如何在离子无线电元件上使用 ngModel?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我正在尝试在 ion-radio 元素上实现 ngModel,但不知何故它不起作用.这是我的代码:

I'm trying to implement a ngModel on a ion-radio element but somehow it doesn't work. This is my code:

import {
  Page
} from 'ionic-angular';

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

export class Settings {
  constructor() {
    this.unit = 2;
  }
}

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

我尝试在离子输入和离子选择上实现它,效果很好.我还尝试将 directives: [FORM_DIRECTIVES] 添加到我的 @Page 并添加相应的导入,但这并不能解决问题.

I've tried implementing it on a ion-input and ion-select and that just works fine. I also tried adding directives: [FORM_DIRECTIVES] to my @Page and added the corresponding import but that doesn't fix the problem.

有什么想法吗?

推荐答案

语法已经改写,ngModel 应该放在 ion-list &radio-group 只有一次.无需将它们放在每个 ion-radio 元素上.

Syntax has been changed rewritten now, ngModel should be place with ion-list & radio-group only once. No need to have them there on each ion-radio element.

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

有关更多信息,您可以访问 ionic2 框架论坛链接

For more information you could visit ionic2 framework forum link

这篇关于如何在离子无线电元件上使用 ngModel?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

How do I can get a text of all the cells of the table using testcafe(如何使用 testcafe 获取表格中所有单元格的文本)
node_modules is not recognized as an internal or external command(node_modules 未被识别为内部或外部命令)
How can I create conditional test cases using Protractor?(如何使用 Protractor 创建条件测试用例?)
PhantomJS and clicking a form button(PhantomJS 并单击表单按钮)
Clicking #39;OK#39; on alert or confirm dialog through jquery/javascript?(在警报上单击“确定或通过 jquery/javascript 确认对话框?)
QunitJS-Tests don#39;t start: PhantomJS timed out, possibly due to a missing QUnit start() call(QunitJS-Tests 不启动:PhantomJS 超时,可能是由于缺少 QUnit start() 调用)