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

Posted 2023-02-22

【中文标题】如何在离子无线电元件上使用 ngModel？

【英文标题】：How can I use a ngModel on an ion-radio element?

【发布时间】：2016-07-05 13:41:56

【问题描述】：

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

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 并添加了相应的导入，但这并不能解决问题。

有什么想法吗？

【参考方案1】：

现在改写了语法，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>

更多信息可以访问ionic2框架forum link

【讨论】：

这对 Ionic 4 仍然有效。谢谢！

不再对 Ionic 4 有效。

@Jouke 感谢您的提醒。如果您可以分享一个链接以使其正常工作，那就太好了。

在 ionic 4+ 中，这需要是 <ion-radio-group [(ngModel)]="unit"> ... </ion-radio-group>

【参考方案2】：

这在 Ionic 5 上对我有用

<ion-radio-group name="iconSelect" ngDefaultControl [(ngModel)]="playerIcon" (ionChange)="setIcon()">
    <ion-list-header>           

    </ion-list-header>

  <ion-item>
    <ion-label>
        <ion-icon name="radio-button-off"></ion-icon>
        Circle
        </ion-label>

    <ion-radio value="1" ></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>
        <ion-icon name="square-outline"></ion-icon>
        Square
    </ion-label>
    <ion-radio value="2"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>
        <ion-icon name="play"></ion-icon>
        Triangle
    </ion-label>
    <ion-radio value="3" ></ion-radio>
  </ion-item>
</ion-radio-group>

【参考方案3】：

它适用于 Ionic 5。

  <ion-radio-group value="answer">
       <ion-item *ngFor="let item of question?.answers">
           <ion-label> item.answer answer</ion-label>
           <ion-radio slot="start" color="tertiary" value="item.id 
                 (ionBlur)="saveAnswer(item.id)">
             </ion-radio>
        </ion-item>
   </ion-radio-group>

【参考方案4】：

您也必须在 Ionic 5 中更新以下代码。

this.unit = 2;  

到

this.unit = '2';  

总之，你不能使用整数变量作为ion-radio的值。

如果您要使用整数类型的单位，请参考以下代码。

this.options = [
  
    label: 'Metric (kg)',
    value: 1
  ,
  
    label: 'Imperial (lbs)',
    value: 2
  
];

在 .html 代码中

<ion-radio-group [(ngModel)]="unit">
  <ion-list-header>
    <ion-label>
      Unit
    </ion-label>
  </ion-list-header>
  <ion-item *ngFor="let opt of options">
    <ion-label>opt.label</ion-label>
    <ion-radio [value]="opt.value" slot="start"></ion-radio>
  </ion-item>
</ion-radio-group>

【参考方案5】：

从 Ionic 4+ 开始，正确的语法是：

<ion-list>
<ion-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-radio-group>
</ion-list>

【参考方案6】：

这适用于 ionic 5..tested 并且工作正常

 <ion-list>
        <ion-radio-group  >
          <ion-list-header>
            <ion-label>'Drivers' | translate</ion-label>
          </ion-list-header>
          <ion-item *ngFor="let item of drivers" lines="none" (ionChange)="checkValue(item)">
            <ion-avatar slot="start">
              <img [src]="item.coverImage" />
            </ion-avatar>
            <ion-label>item.fullname <br>
              <p>'Distance' | translate : item.distanceKm</p>
            </ion-label>
            <ion-radio [value]="item.id"></ion-radio>
          </ion-item>
        </ion-radio-group>
      </ion-list>

然后在你的控制器中你可以像这样选择它

检查值（值）

console.log("返回", 值);

【参考方案7】：

这对我有用

 postData=
"gender":''

   <ion-list>
  <ion-radio-group value="Male" >
    <ion-list-header>
      <ion-label style="font-size:10px;">Gender</ion-label>
    </ion-list-header>
    
    <ion-item>
      <ion-label>Male</ion-label>
      <ion-radio slot="start" value="Male" (ionBlur)="postData.gender='Male'"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Female</ion-label>
      <ion-radio slot="start" value="Female" (ionBlur)="postData.gender='Female'"></ion-radio>
    </ion-item>

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

【讨论】：

你能解释一下你做了什么让它发挥作用吗？