多次单击时未选中角度材料垫单选按钮答案

【问题标题】：angular material mat radio button unchecked on multiple click多次单击时未选中角度材料垫单选按钮
【发布时间】：2019-05-05 20:40:00
【问题描述】：

如何清除第二次点击时选中的<mat-radio-button> （已经被选中后）

我知道我可以使用复选框实现此行为，但我只需要允许选择一项。

有什么帮助吗？

我的代码如下：

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

【问题讨论】：

详细说明您的要求并分享您迄今为止所做的尝试。
你搞错了。您已经可以使用单选按钮仅选择一项。您不能全部取消选择，这不是它们的工作方式。

标签： angular radio-button angular-material

【解决方案1】：

您可以执行以下操作来完成此操作。

为按钮#button分配一个模板引用并将其传递给组件方法(click)="checkState(button)"

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

在组件中创建一个局部变量，将按钮值存储在checkState()中进行比较

 currentCheckedValue = null;

DI Renderer2 移除按钮的焦点

 constructor(private ren: Renderer2) { }

在setTimeout 中包装逻辑以将其放在摘要循环中，检查局部变量是否存在以及当前值是否等于参数值...如果为真取消选择，删除焦点和空局部变量...否则设置局部变量为未来比较。

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

堆栈闪电战

https://stackblitz.com/edit/angular-c37tsw?embed=1&file=app/radio-ng-model-example.ts

【讨论】：

非常感谢，它工作正常！只有一个小问题：取消勾选后，模型（favoriteSeason）不为空。我添加以下行“this.favoriteSeason = null;”在真实的情况下，它工作完美。这是正确的方法吗？谢谢！
请查看stackblitz的修订版和checkState()我添加了设置this.favoriteSeason = null
好吧，如果你有反应形式，它就不起作用......所以你需要在 checkState 上添加另一个参数，例如： checkState(el, event: MouseEvent) ... 并执行 event.preventDefault( );在超时之前在那里......并且在视图中你需要调用它 (click)="checkState(button, $event)" ... 希望它有帮助

【解决方案2】：

我在这里简化了 Marshal 的代码

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

我删除了 setTimeout 和 Renderer2 导入，即使没有这些但使用 event.preventDefault() 似乎也可以工作。

【讨论】：

嘿，我已经使用了你的解决方案，它有效！非常感谢！

【解决方案3】：

我不确定您在寻找什么答案，因为角材料单选按钮的默认行为是只允许一个选定的项目。（这是我假设您根据您的问题提出的问题）

您是否尝试创建用户可以取消选择所有单选按钮的行为？

【讨论】：