有没有一种简单的方法可以在 Ionic 2 中取消选择离子无线电？

Posted 2023-03-05

【中文标题】有没有一种简单的方法可以在 Ionic 2 中取消选择离子无线电？

【英文标题】：Is there a simple way to unselect a ion-radio in Ionic 2?

【发布时间】：2017-09-17 11:24:32

【问题描述】：

在用户选择离子无线电后，组件会调用一个函数。我需要该功能来取消选择收音机。

模板：

  <form [formGroup]="myForm">
    <ion-list radio-group formControlName="listOptions">
      <ion-item>
        <ion-label>Option 1</ion-label>
        <ion-radio value="1" (ionSelect)="myFunction($event)"></ion-radio>
      </ion-item>
    </ion-list>
  </form>

【参考方案1】：

您可以为此使用checked。并使用布尔值来操作它。在 .html 中添加这个

<ion-radio checked=isChecked value="1" (ionSelect)="myFunction($event)"></ion-radio>

在 .ts 中添加：

export class SomePage
  isChecked = false;

  constructor(...)...

  myFunction($event)
    this.isChecked = !this.isChecked; // I am assuming you want to switch between checking and unchecking while clicking on radio.
  

如果有多个单选按钮，您可以使用 isChecked[] 等标志数组。

【讨论】：

遗憾的是该解决方案不起作用，离子无线电仍然处于检查状态。

尝试手动将其设置为 false。像this.isChecked = false。这行得通吗？

我收到一个控制台错误，内容为：无法绑定到“已检查”，因为它不是“离子无线电”的已知属性。

【参考方案2】：

不确定这里的用例，但我们开始...

由于您使用的是响应式表单，因此您可以在表单控件上执行一些功能，其中之一是 reset()。因此，在您的函数中，您只需像这样重置值：

myFunction() 
  this.myForm.controls.listOptions.reset()

如果这是单选按钮的初始状态，它会将其重置为未选中状态。

Demo, which sets resets radio button after a couple of seconds

【讨论】：

你是老板

:D 很高兴我能帮上忙！ :)

【参考方案3】：

我在使用 Ionic 4 时发现了一些问题，我以两种不同的方式解决了这个问题，具体取决于 4.x 版本。

查看

<ion-item>
  <ion-label> A </ion-label>
  <ion-radio
    (click)="changeA()"
    [checked]=a
  >
  </ion-radio>
</ion-item>


<ion-item>
  <ion-label> B </ion-label>
  <ion-radio
    (click)="changeB()"
    [checked]=b
  >
  </ion-radio>
</ion-item>

<ion-button (click)="remove()">
  <ion-label>
    CLEAN
  </ion-label>
</ion-button>

控制器

a = false;
b = false;

changeA()
  this.a = !this.a
  if(this.a && this.b)
    this.b = false;

changeB()
  this.b = !this.b
  if (this.b && this.a)
    this.a = false;


remove()
  this.a = false;
  this.b = false;

如果您发现了一些问题，请将每个单选按钮中的点击从ion-radio 移至ion-item。以4.11.x 为例。我必须这样做，但我不知道具体原因。

你可以试一试here。

希望对大家有所帮助。