Как использовать слайдер в мат-таблице? - PullRequest
Новая
       84

Как использовать слайдер в мат-таблице?

1 голос
/ 28 сентября 2019

У меня есть 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>

Это не работает и приводит к странному результату, когда при выключении переключателя его невозможно снова включить, связь исчезает,и столбец переключения тоже.Вот скриншот.

screenshot

Логические значения помещаются справа от таблиц, когда они переключаются на false

Обновление:

Вот пример stackblitz .Переключатель не работает, но в основном при нажатии на переключатель значение active должно переключаться между true и false в зависимости от того, включен или выключен переключатель.

Ответы [ 2 ]

0 голосов
/ 28 сентября 2019

Насколько я понимаю, ваша кнопка / ссылка зависит от значения активного или неактивного.Таким образом, вы можете поместить 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 обрабатывается одной функцией, в которой я передаю значение идентификатора (уникальный идентификаторэтой строки) и изменение активного значения по его щелчку 

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

Рабочая демонстрация: https://stackblitz.com/edit/angular-ne15tp

Примечание: Пожалуйста, не стесняйтесь улучшать производительностькод, поскольку это просто фиктивная реализация для демонстрационной цели

0 голосов
/ 28 сентября 2019

Причина, по которой ваш код не работает, заключается в том, что вы не можете использовать два mat-cell в mat-column.Второй будет полностью проигнорирован.Вот почему ваша таблица запуталась, потому что в некоторых ячейках hidden скрывает единственный cell, присутствующий в этом столбце (так как вторая ячейка находится вне изображения).

Вы не должныиспользовать две отдельные клетки для этого.Вы хотите, чтобы Activate / Deactivate появился в той же ячейке.Таким образом, вместо использования hidden на mat-cell, используйте 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 .

...