如何在 mat-table 中使用滑动切换？

Question

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

我已经用 bootstrap table 这样实现了：

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

上面的代码将向 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>

这不起作用并产生奇怪的结果，当切换关闭时无法再次打开，link 消失，切换列也消失了。这是截图。

布尔值在切换到 false

时被推到 table 的右侧

已更新：

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

Answer 1

您的代码无法正常工作的原因是您不能在 mat-column 中使用两个 mat-cell。第二个将被完全忽略。这就是为什么你的 table 搞砸了，因为在某些单元格上 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>

编辑：（评论后）

如果您不想显示特定的列，只需将其从显示的列中删除，这样它就不会被 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

据我了解，您的 button/link 取决于活动或非活动的值。所以你可以在一个单元格中放置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

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

Answer 3

<ng-container matColumnDef="Status">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
     <td mat-cell *matCellDef="let row">
     <mat-slide-toggle
          [matTooltip]="row.active? 'Deactivate': 'Activate'"
          [checked]="row.ativo"
          (change)="updateStatusAccount(row.id, $event)">
      </mat-slide-toggle>
    </td>
</ng-container>

如何在 mat-table 中使用滑动切换？

How to use a slide toggle in a mat-table?

typescript

angular-material

angular

mat-table

已更新：