角柱可选表-柱位置

如何解决角柱可选表-柱位置

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

任何人都可以提出建议，如何实现这一目标？

解决方法

“关键”是行

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

stackblitz

注意你也可以使用像这样的 getter

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

而且您不需要使用事件 (change)