如何在垫表中使用滑动切换？

Question

我有一个mat-table，由 3 个不同角色的用户查看。 该表有多个列；其中一列是active（控制帐户激活和停用的布尔值）。我想在同一个表中（在另一列中）使用开关切换该值，但前提是用户是管理员。

我已经通过这种方式使用引导表实现了这一点：

<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>
</table>

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

使用mat-table，我得到了布尔值active 列。

<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，布尔值就会被推送到表格的右侧

更新：

这是一个stackblitz 示例。切换不起作用，但基本上当您单击切换时，活动的值应在 true 和 false 之间切换，具体取决于切换是打开还是关闭。

Answer 1

您的代码不起作用的原因是您不能在mat-column 中使用两个mat-cell。第二个将被完全忽略。这就是为什么您的表格变得一团糟的原因，因为在某些单元格上，hidden 隐藏了该列中唯一的 cell（因为第二个单元格不在图片中）。

您不应该为此使用两个单独的单元格。您希望 Activate/Deactivate 出现在同一个单元格中。因此，不要在mat-cell 上使用hidden，而是在锚标签上使用ngIf 有条件地显示Activate/Deactivate。

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

编辑：（在 cmets 之后）

如果您不想显示特定列，只需将其从显示的列中删除，这样mat-table 就不会呈现它。

allColumns: string[] = ['position', 'name', 'weight', 'symbol', 'activate', 'toggle'];

checkIfAdmin() {
    this.displayedColumns = this.isAdmin ? this.allColumns : this.allColumns.filter(column => column !== 'toggle');
}

这是StackBlitz 上的一个工作示例。

Answer 2

据我了解，您的按钮/链接取决于活动或非活动的值。所以你可以在一个单元格中放置2个锚标签并根据活动列的值显示它

<ng-container matColumnDef="toggle">
    <th mat-header-cell *matHeaderCellDef> Toggle </th>
    <td mat-cell *matCellDef="let element">
      <a *ngIf="element.active === false" (click)="toggle(element.position)">Activate</a>
      <a *ngIf="element.active === true" (click)="toggle(element.position)">Deactivate</a>
    </td>
  </ng-container>

如您所见，onclick 由一个函数处理，我在其中传递一个 ID 值（该行的唯一标识符）并更改其点击时的活动值

toggle(position) {
    this.dataSource.find( d=> d.position === position).active = !this.dataSource.find( d=> d.position === position).active;
  }

工作演示：https://stackblitz.com/edit/angular-ne15tp

注意：请随意改进代码的性能，因为这只是一个用于演示目的的虚拟实现