angular6 - 根据来自服务器的数据禁用 mat-table 内的 mat-checkbox

Question

在我的应用程序中，添加新用户时，我将从下拉列表中选择组，并根据所选组，加载 mat-table 数据。它包含 RoleName 和一个用于选择角色的复选框。组包含很少的角色，它们将根据来自服务器的 checkRole 是 true 还是 false 进行检查。当来自服务器的 checkRole 为真时，我想禁用该复选框。剩下的 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>

标签： angular6