html - 使用 mdc-icon 延迟切换

Question

我有以下代码：

<ng-container matColumnDef="compare" >
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Compare </th>
  <!--<td mat-cell *matCellDef="let protocol"><i class="material-icons">favorite_border</i></td>-->
  <td  mat-cell *matCellDef="let experiment" (click)="$event.stopPropagation()" >
    <button mdcIconButton [on]="true">
    <mdc-icon mdcIconOn #content onClick="onSelect(1, experiment)">radio_button_unchecked</mdc-icon>
    <mdc-icon onClick="onSelect(2, experiment)">radio_button_checked</mdc-icon>
  </button>
</td>
</ng-container>

这是有效的，但有时它有延迟并且当我选择一个单选按钮时没有得到它，这是一个问题。通常当我慢慢选择时，它会得到它。

我想知道是否有另一种简单的方法来做一个像这样的拨动开关，而不使用 mdc-icon 因为显然这是一个问题。我不明白如何使用 ng-switch 例如...

我试过这个：

<ng-container matColumnDef="compare" >
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Compare </th>
  <!--<td mat-cell *matCellDef="let protocol"><i class="material-icons">favorite_border</i></td>-->
  <td  mat-cell *matCellDef="let experiment" (click)="$event.stopPropagation()" >
        <button (click)='onSelect(1, experiment)'>Select</button>
        <button (click)='onSelect(2, experiment)'>Unselect</button>
</td>
</ng-container>

并且它确认问题来自 mdc-icon，因为它工作得很快并且得到了我的选择。但显然它很丑陋并且没有切换。

标签： htmlangular