角度列可选表-列位置

Question

我想在我的角度代码中添加列可选表。(类似于：https://stackblitz.com/edit/poc-column-selector?file=app%2Ftable-基本-复杂-示例.ts(但我希望列的顺序是相同的。这意味着在取消选择并再次选择后，它应该只将列附加到其原始位置，而不是在末尾或任何随机位置。

有人能建议一下如何实现这一点吗？

Answer 1

；键"；线路是吗

<mat-header-row *matHeaderRowDef="group.value"></mat-header-row>
<mat-row *matRowDef="let row; columns: group.value;"></mat-row>

列不应为组值，否则如果值在组值中，则为固定数组筛选器。所以，

<mat-button-toggle-group [multiple]="true" #group="matButtonToggleGroup" 
(change)="setColumns()">
@ViewChild('group') toggle: MatButtonToggle;
columns:any[]
setColumns(){
this.columns=['position','name','weight','symbol'].filter(x=>this.toggle.value.indexOf(x)>=0)
}

和变化：

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

堆叠式

注意：您也可以使用类似的吸气剂

get columns()
{
return ['position','name','weight','symbol'].filter(x=>this.toggle.value.indexOf(x)>=0)
}

并且您不必使用事件(change)