如何显示和隐藏特定列？
如何显示和隐藏特定列？
提问于 2018-08-08 17:37:26
我有一个和mat-menu的mat-table
<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和hide操作。
有没有办法让它工作呢？
回答 3
Stack Overflow用户
发布于 2018-08-08 19:53:36
我确信有几种方法可以做到这一点，但我看到的一种方法是让每个菜单项的单击事件将关联的列名传递给执行列隐藏或显示的函数。下面的示例没有对列进行排序(因为使用了splice和push，所以列隐藏/显示总是发生在表的最后一列)，但是添加额外的逻辑来维护特定的顺序应该不会有太大的变化。
Stack Overflow用户
发布于 2019-06-10 00:06:24
您可以在视图中使用一组切换按钮，并使用它们的值指向列，如下所示：
<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
Stack Overflow用户
发布于 2019-06-20 21:53:21
我使用的一种解决方案是创建一个remove函数，该函数可以为每个列重用。
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>注意:不要忘记导入适当的模块。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51743345
复制相关文章
相似问题