Question

我有一个mat-table的{{1}}

mat-menu

html

我还有一个显示<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;和slice。我正在尝试点击push和show的特定列。

有没有办法使它起作用。

感谢您的帮助。谢谢

Answer 1

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

StackBlitz example

Answer 2

感谢您的示例。已经找了很长时间了。一件事令我困扰，但是...当再次从左侧插入隐藏列时：(如何优化功能，以便在隐藏同义词的位置再次显示相同位置的列？

最好的问候安德烈亚斯（Andreas）

Answer 3

您可以在视图中使用一组切换按钮，并使用它们的值指向这样的列：

<mat-button-toggle-group [multiple]="true" group="matButtonToggleGroup">
  <mat-button-toggle value="colname">
    <span>button name</span>
  </mat-button-toggle>
       .......
</mat-button-toggle-group>

然后，您可以通过在ts文件中添加以下行来切换按钮来切换列：

@ViewChild('group') toggle: MatButtonToggle;

请参见工作示例here

Answer 4

我使用的一个解决方案是创建一个可以对每列重复使用的删除函数。

my.component.ts

displayedColumns: string[] = ['thatParticularColumn'];
columnsToDisplay: string[] = this.displayedColumns.slice();

removeThatParticularColumn() {
 this.remove('thatParticularColumn');
}

remove(ele: string) {
 let index = this.columnsToDisplay.indexOf(ele);
 if (index > -1) {
    this.columnsToDisplay.splice(index, 1);
 }
}

my.component.html

<mat-table>
   </ng-container matColumnDef="thatParticularColumn">
      ...
   </ng-container>
   <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
   <mat-row *matRowDef="let row; columns: columnsToDisplay;"></mat-row>
<mat-table>

<button mat-button (click)="removeThatParticularColumn()"> Hide That Particular Column </button>

注意：不要忘记导入适当的模块。

显示和隐藏角材质中的特定Cloumn2

4 个答案: