时间戳

首页 > 解决方案 > 如何显示和隐藏特定的列？

angular-material - 如何显示和隐藏特定的列？

问题描述

我有mat-table一个mat-menu：

<mat-menu #menu="matMenu">
  <button mat-menu-item>
        <mat-icon>notifications_off</mat-icon>
        <span>Index</span>
      </button>
  <button mat-menu-item>
        <mat-icon>voicemail</mat-icon>
        <span>Created At</span>
      </button>
</mat-menu>

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="index">
    <th mat-header-cell *matHeaderCellDef> Index </th>
    <td mat-cell *matCellDef="let vms"> {{vms.index}} </td>
  </ng-container>

  <ng-container matColumnDef="createdAt">
    <th mat-header-cell *matHeaderCellDef> Created At </th>
    <td mat-cell *matCellDef="let vms">{{vms.vm_created_at}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

我还有一个显示列表的菜单，displayedCloumns当我单击菜单时，我试图显示和隐藏列。例如index或createdAt

component

displayedColumns = ['index', 'createdAt'];
dataSource;

Angular 材料文档中的示例解释、显示和隐藏随机列并使用sliceand push。

我正在尝试单击特定列show。hide

有没有办法让它工作？

标签： angular-materialangular-material2

解决方案

我确信有几种方法可以做到这一点，但我看到的一种方法是让每个菜单项的单击事件将关联的列名传递给执行列隐藏或显示的函数。下面的示例没有对列进行排序（因为使用splice和push，列隐藏/显示总是发生在表的最后一列），但是添加额外的逻辑来维护特定的顺序不应该有太大的变化。

StackBlitz 示例

推荐阅读