Question

如何清除第二次点击时选中的<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>

Answer 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中包装逻辑以将其置于摘要循环中，检查局部变量是否存在，以及当前值是否等于参数值...如果为true，则取消选择，移除焦点并将null局部变量...否则设置为local变量以供将来比较。

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

Stackblitz

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

Answer 2

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

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

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

Answer 3

我不确定您要查找的答案是什么，因为有角材质单选按钮的默认行为是仅允许一个选中的项。（这是我根据您的问题所假设的）

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

Answer 4

我认为您需要一个<mat-radio-group> 您可以看一下我在stackblitz上制作的这个示例： https://stackblitz.com/edit/angular-gciurb

多次单击时未选中“角材垫”单选按钮

4 个答案: