带有ngIf的错误ExpressionChangedAfterItHasBeenCheckedError

Question

该代码在没有ngIf的情况下有效，但是我需要在此处放置一个条件。我也尝试过使用[ngIf] = ...

基本上，我只希望在选中其中两个单选按钮时将它们关闭。并且当一个未被选中时，它们应该继续工作。

这是代码：

<table>
  <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 (click)="onSelect(1, experiment)" *ngIf="selectedExperiments.length<2">radio_button_unchecked</mdc-icon>
      <mdc-icon (click)="onSelect(2, experiment)">radio_button_checked</mdc-icon>
    </button>
  </td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row (click)="getRecord(row)" *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

onSelect(int: any, selectedExp: any) {
      if(int == 1){
        //document.getElementById("result").innerHTML ="";
        //this.ele = document.getElementsByTagName('input');
        if(this.selectedExperiments.length==0){
          this.selectedExperiments[0]=selectedExp;
        } else {
          this.selectedExperiments[this.selectedExperiments.length] = selectedExp} // because the first table box is 0
        console.log(this.selectedExperiments.length);
      }
      if(int == 2 ){
        for(var i = 0; i < this.selectedExperiments.length; i++){
          if(this.selectedExperiments[i].protocol.name == selectedExp.protocol.name){
            this.selectedExperiments.splice(i); //splice delete the element and reorganize the table
          }
        }
        console.log(this.selectedExperiments.length);
      }
    }