在多次点击上未选中的角度材料垫广播按钮

Question

我如何清除第二次单击时选择 （已经选择后）

我知道我可以使用复选框实现此行为，但我需要仅选择一个项目。

任何帮助？

我的代码看起来像：

<mat-radio-button>

**更新**10/11/2022

参考Sara的Stackblitz答案下面。

您可以做以下事情来实现这一目标。

Answer 1

<mat-radio-group name="WasFamilyMemberPresent">
    <mat-radio-button *ngFor="let item of lookupNoYes" [value]="item.Code" >
       {{item.Desc}}
    </mat-radio-button>
</mat-radio-group>

并将其传递到组件方法

#button

---

(click)="checkState(button)"

创建组件中的局部变量以存储按钮值以进行比较。

<mat-radio-button #button class="example-radio-button" *ngFor="let season of seasons" [value]="season" (click)="checkState(button)">

di renderer2从按钮上删除焦点checkState()

将其置于消化循环中，检查局部变量是否存在，以及当前值是否等于参数值...如果是真正的取消选择，请删除焦点和null local变量... else设置本地变量以将来比较.

currentCheckedValue = null;

stackblitz

https：//stackblitz.com/edit/angular-c37tsw？embed = 1＆file = app/darida-radio-ng-model-example.ts

我在这里简化了元帅的代码

https：//stackblitz.com/edit/angular-c37tsw-zho1oe

i删除了 constructor(private ren: Renderer2) { }

和

setTimeout进口，即使没有这些，它似乎也起作用了。

我遇到了与OP相同的问题，我尝试了最受欢迎和第二受欢迎的答案，但它们都不适合我。我正在使用Angular 10，这篇文章已经4岁了，所以我希望这个答案能帮助其他有问题的人。

Answer 2

checkState(el) {
    setTimeout(() => {
      if (this.currentCheckedValue && this.currentCheckedValue === el.value) {
        el.checked = false;
        this.ren.removeClass(el['_elementRef'].nativeElement, 'cdk-focused');
        this.ren.removeClass(el['_elementRef'].nativeElement, 'cdk-program-focused');
        this.currentCheckedValue = null;
        this.favoriteSeason = null;
      } else {
        this.currentCheckedValue = el.value
      }
    })
  }

。我认为以上2个答案不再工作的原因是在您在TS文件中收到按钮之前设置该按钮的值，因此无论您如何尝试将

setTimeout

值分配给Renderer2去上班。但是改变该课程是可行的。此方法还允许您取消选择按钮，而无需跟踪任何类型的全局变量。这是一个通用示例：

在html中，每个按钮都使用the the the the Reference变量和单击事件传递事件和按钮参考。

event.preventDefault()

然后在

'mat-radio-checked'

函数检查中检查以确保用户单击的按钮具有类

_checked

;如果确实可以删除支票类并添加我们自己的标志

Answer 3

。这样，如果您取消选中选项，请再次检查它，我们将知道它已再次检查并可以继续添加

#

类。

  <mat-radio-group class="radio-group">
    <mat-radio-button #option1 class="radio-item" value="New User" (click)="onRadioClick($event, option1)”>New User</mat-radio-button>
    <mat-radio-button #option2 class="radio-item" value=“Existing User" (click)="onRadioClick($event, option2)”>Existing User</mat-radio-button>
  </mat-radio-group>

为此进一步说明，只需在浏览器中检查您的MAT-RADIO-BUTTON元素，您就可以看到我在谈论的

onRadioClick

CSS课程，并且应该变得显而易见。 上面的所有答案都是用于模板驱动的形式，这些形式是被拟合的，没有打字并且没有单位测试，所以这是我对此的看法。

在我的模板中，我有3个广播按钮（不介意

'mat-radio-checked'

翻译或CSS类）：

marked-unchecked在我的脚本中我有：

'mat-radio-checked'

我们无需防止默认事件，因为我们正在触发反应性形式控制的激活。
我的单位测试（带有业力/茉莉花）也是如此：

onRadioClick(event: any, button: any): void {
  let targetButton = event.target;
  while (targetButton && targetButton.parentNode && targetButton.parentNode.classList) {
    targetButton = targetButton.parentNode;
    if (targetButton.classList.contains('mat-radio-checked') && !targetButton.classList.contains('marked-unchecked')) {
      targetButton.classList.remove('mat-radio-checked');
      targetButton.classList.add('marked-unchecked');
      break;
    }
    if (targetButton.classList.contains('marked-unchecked')) {
      targetButton.classList.remove('marked-unchecked');
      targetButton.classList.add('mat-radio-checked');
    }
  }
}

我希望这对某人有帮助。它已经完成并使用角/角材料17.

我不确定您要寻找什么答案，因为Angular材料无线电按钮默认行为是仅允许选择项目。 （这就是我认为您是根据问题问的）您试图创建用户可以取消选择

all

无线电按钮的行为吗？

Answer 4