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

Posted 2023-03-13

【中文标题】如何在垫表中使用滑动切换？

【英文标题】：How to use a slide toggle in a mat-table?

【发布时间】：2020-01-28 09:28:29

【问题描述】：

我有一个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 之间切换，具体取决于切换是打开还是关闭。

【问题讨论】：

你能创建一个同样的堆栈闪电战吗？

屏幕截图似乎与您的代码不一致。您的代码显示标题的名称是 Activate/Deactivate 而屏幕截图显示 toggle

如果您不想显示列，您只需更改数组displayedColumns - 您在标签<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> 和<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> 中使用的变量

@Eliseo 谢谢 eliseo 我虽然我可以在 mat-cell 上使用 [hidden]，但你的回答完全有道理，试过了，它可以工作

【参考方案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 上的一个工作示例。

【讨论】：

一个问题，我可以向 ng-container 添加一个指令，这样如果用户不是管理员，则不应显示该列*<ng-container matColumnDef="activation" *ngIf="isAdmin(currentUser)"> 通常 ngIf 应该在标题所以，但我不知道这是否也可以工作

@capuche 我已经更新了我的答案并添加了一个工作示例。使用示例中的Toggle Admin 按钮来检查管理员看到的内容，否则

【参考方案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

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

【讨论】：

再想一想，因为这是由具有不同角色的用户查看的，并且只有管理员才能执行此操作，您将在哪里添加检查以说 [hidden]="currentUser.role === '1'" 或 *ngIf="isAdmin(currentUser)" 这似乎适用于管理员，但是当我以普通用户身份登录时，它没有隐藏

我已经相应地更新了 stackblitz。请检查一下。如果它解决了您的问题，请将其标记为答案。快乐编码:)