多次单击取消选中角材料垫单选按钮

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以将其放在摘要循环中，检查局部变量是否存在以及当前值是否等于参数值...如果为真取消选择，删除焦点和空局部变量...否则设置局部变量以供将来比较。

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

Answer 2

我在这里简化了 Marshal 的代码

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

我删除setTimeout并Renderer2导入，即使没有这些，它似乎也能工作，但带有event.preventDefault().