angular - 如何在垫表中使用滑动开关？

Question

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

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

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

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

使用 mat-table ，我得到了 bool 值 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>

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



每当 bool 值切换到 false 时，它们就会被推到表的右侧。

更新:

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

Answer 1

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

您不应该为此使用两个单独的单元格。你要Activate/Deactivate出现在同一个单元格中。所以不要使用 hidden在 mat-cell , 使用 ngIf在 anchor 标签上有条件地显示 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 上的一个工作示例.