是否有一种简单的方法可以在离子2中取消离子-Radio

Question

用户选择一个离子 - radio a函数在组件处被调用。我需要该功能来取消收音机。

模板：

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

Answer 1

不确定这里的用户酶，但是我们去...

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

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

，如果这是您的初始状态，则将其重置为未检查。

演示，将在几秒钟之后设置RESETS RASET按钮

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

我发现了使用离子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的示例中。我必须这样做，但我不知道为什么。

您可以在这里玩一个例子。

我希望它能帮助某人。