根据服务器中的数据禁用mat-table中的mat-checkbox

Question

在我的应用程序中，添加新用户时，我将从下拉菜单中选择“组”，然后将基于所选的“组”加载垫表数据。它包含RoleName和一个用于选择Role的复选框。组包含几个角色，将根据来自服务器的checkRole是true还是false来检查它们。当服务器的checkRole为true时，我想禁用该复选框。其余的CheckBoxes我应该可以选中或取消选中。我尝试了多种情况，但是当我选中一个复选框时，它也被禁用了。

<div class="mat-elevation-z8" style="border: 1px solid darkblue">
  <mat-table [dataSource]="dataSource" id="matTable" matSort>
  <ng-container matColumnDef="roleName">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Role Name</mat-header-cell>
    <mat-cell *matCellDef="let element" data-label="Role Name">{{element.roleName}}</mat-cell>
  </ng-container>

   <!-- Action column -->
  <ng-container matColumnDef="checkRole">
    <mat-header-cell *matHeaderCellDef >Add Role to Group</mat-header-cell>
    <mat-cell *matCellDef="let element" data-label="Add Role to Group">
        <mat-checkbox [(ngModel)]="element.checkRole" [disabled]="element.checkRole">
        </mat-checkbox>
    </mat-cell>
  </ng-container>
     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
     <mat-row *matRowDef="let row; columns: displayedColumns" (click)="selectRow(row)"></mat-row>
</mat-table>