Question

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

模板：

this.handleRemove = this.handleRemove.bind(this);

Answer 1

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

由于您使用的是被动表单，因此您可以在表单控件上执行某些功能，其中一个是reset()。所以在你的函数中，你只需要像这样重置值：

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

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

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

Answer 2

您可以使用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[]等标记数组。

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

我希望它能对某人有所帮助。

在Ionic 2中有没有一种简单的方法来取消选择离子收音机？

3 个答案: