angular - bir mat-table'da kaydırmalı açma/kapama nasıl kullanılır?

Benim, farklı rollere sahip 3 kullanıcı tarafından görüntülenen bir mat-table tablom var. Tablo birden fazla sütuna sahip; sütunlardan biri active (hesabın etkinleştirilmesini ve devre dışı bırakılmasını kontrol eden bir boolean değer). Bu değeri aynı tablonun içinde (başka bir sütunda) bir anahtar ile değiştirmek istiyorum, ancak sadece kullanıcı bir yönetici ise.

Bunu zaten bootstrap tablosunu şu şekilde kullanarak başardım:

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

Yukarıdaki kod, tabloda yöneticinin boolean değerine bağlı olarak etkinleştir veya devre dışı bırak seçeneklerine tıklayabileceği bir sütun ekleyecektir. İşlemler bileşen içerisinde uygulanmaktadır.

mat-table kullanarak, boolean active sütununu çalıştırmayı başardım.

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

Amacım, true ile false arasında gidip gelen bir değeri tutan başka bir sütun oluşturmak.

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

Bu çalışmıyor ve garip bir sonuç üretiyor; toggle kapatıldığında tekrar açılamıyor, link kayboluyor ve toggle sütunu da yok oluyor. İşte bir ekran görüntüsü.

Boolean değerler false'a geçirildiğinde tabloların sağ tarafına itilirler

Güncellendi :

İşte bir Stackblitz örneği. Toggle çalışmıyor ama temelde toggle'a tıkladığınızda active değeri toggle açık veya kapalı olduğuna bağlı olarak true ve false arasında değişmelidir.

Cevap #1

Kodunuzun çalışmamasının nedeni, bir mat-column içinde iki mat-cell kullanamamanızdır. İkincisi tamamen yok sayılacaktır. Bu yüzden tablonuz tamamen karışıyor çünkü bazı hücrelerde hidden, o sütundaki tek bulunan celli gizliyor (çünkü ikinci hücre işin dışında kalıyor).

Bunu yapmak için iki ayrı hücre kullanmamalısınız. Activate/Deactivate'in aynı hücrede görünmesini istersiniz. Bu nedenle mat-cell üzerinde hidden kullanmak yerine, Activate/Deactivate'i koşullu olarak göstermek için bağlantı etiketlerinde ngIf kullanın.

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

Düzenle: (yorumlardan sonra)

Belirli bir sütunu göstermek istemiyorsanız, sadece görüntülenen sütunlardan kaldırın, bu şekilde mat-table tarafından render edilmeyecektir.

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

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

İşte StackBlitz üzerinde çalışan bir örnek.

Cevap #2

Anladığım kadarıyla butonunuz/linkiniz aktif veya pasif değerine bağlı. Yani bir hücreye 2 tane bağlantı etiketi koyabilir ve bunu aktif sütunun değerine göre gösterebilirsiniz

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

Gördüğünüz gibi onclick, tek bir fonksiyon tarafından ele alınıyor; burada bir ID değeri (o satırın benzersiz tanımlayıcısı) geçiriyor ve tıklamasında aktif değeri değiştiriyorum.

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

Çalışan Demo: https://stackblitz.com/edit/angular-ne15tp

Not: Bu sadece demo amaçlı bir sahte uygulama olduğundan kodun performansını geliştirmekten çekinmeyin

İlgili makaleler