<table class="table table-striped"> <thead> <tr> <th *ngIf="isAdmin(currentUser)" (click)="sortByAccountStatus()"><a>Deactivate/Activate</a> <a class="sort-by"></a></th> </tr> </thead> <tbody> <tr *ngFor="let chartOfAccounts of accountList.reverse();" [hidden]="currentUser.role !== '1'"> <td [hidden]="!chartOfAccounts.accountActive"><a (click)="deactivateAccount(chartOfAccounts)" class="text-danger">Deactivate</a></td> <td [hidden]="chartOfAccounts.accountActive"><a (click)="activateAccount(chartOfAccounts)" class="text-danger">Activate</a></td> </tr> </tbody> <tbody> <tr *ngFor="let chartOfAccounts of accountList" [hidden]="currentUser.role === '1'"> <td >{{accountActiveStatus(chartOfAccounts.accountActive)}}</td> </tr> </tbody>

Question

上面的代码将在表中添加一列，管理员可以根据布尔值在其中单击激活或停用，并且操作在components.ts上实现。

现在使用mat-table，我首先获得了布尔活动列

<ng-container matColumnDef="accountActive">
          <mat-header-cell *matHeaderCellDef mat-sort-header>Active</mat-header-cell>
          <mat-cell *matCellDef="let chartOfAccounts"> {{chartOfAccounts.accountActive}} </mat-cell>
      </ng-container>

所以我的目标是创建另一列，像这样保持从true到false的来回切换

  <ng-container matColumnDef="activation">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Activate/Deactivate</mat-header-cell>
    <mat-cell *matCellDef="let chartOfAccounts" [hidden]="!chartOfAccounts.accountActive">
    <a (click)="deactivateAccount(chartOfAccounts)" class="text-danger">Deactivate</a></mat-cell>
    <mat-cell *matCellDef="let chartOfAccounts" [hidden]="chartOfAccounts.accountActive">
      <a (click)="activateAccount(chartOfAccounts)" class="text-danger">Deactivate</a></mat-cell>
  </ng-container>

这不起作用，并产生一个奇怪的结果，在这种情况下，当切换开关关闭时，无法再次打开，链接消失了，切换栏也消失了。这是屏幕截图。

将布尔值切换为false时，它们会推到表的右侧
我有一个席子表，供3个不同角色的用户查看。该表有多个列，其中一列是：active（控制帐户激活和停用的布尔值）...