刷新 ngx-datatable headers

Question

对于我正在构建的数据table，我需要使用动态 headers（单击按钮时，不同的数据会加载到 table 和 headers 需要更改）。我正在使用它在 soft-deleted 用户和普通用户之间切换（删除列变为恢复列）。

更新行，table 的工作方式如下所述： this.rows = [...this.rows];

更新我的专栏是另一回事。我使用 this.columns = [...this.columns]; 以相同的方式尝试过，但这不会刷新 table headers。现在我拥有的是 table，其中 header 仅在后台刷新时才会更改，我似乎无法找到触发刷新的方法。我的 table 看起来像这样：

<ngx-datatable
  [rows]="rows"
  [columns]="columns"
  [columnMode]="'flex'"
  [sortType]="'single'"
  [headerHeight]="50"
  [footerHeight]="50"
  [selected]="selected"
  (select)='onSelect($event)'
  [selectionType]="'checkbox'"
  [selectAllRowsOnPage]="true"
  [limit]="rowLimit"
  [reorderable]="false"
  [rowHeight]="'auto'" style="width: 100%">
</ngx-datatable>

这是我更新列的代码：

this.route.params.subscribe(params => {
  this.state = params.state;

  if (this.state === 'deleted') {
    this.columns[columnIndex].name = 'Recover';
  } else if (this.state === 'notactivated') {
    this.columns[columnIndex].name = 'Delete';
  }

Answer 1

好吧，我又花了几个小时，但我弄明白了。这有点老套，但如果我将列 ID 设置为未定义，我可以强制刷新列。下面的代码有效并在每次更新列 header 时强制刷新（我称之为 switchedColumn）：

// If there is a switchedColumn, remove the old column and add this as a new column to force a refresh
if (switchedColumn && switchedColumn.$$id) {
  this.columns = this.columns.filter(c => c.$$id != switchedColumn.$$id);
  switchedColumn.$$id = undefined;
  this.columns = [...this.columns, switchedColumn]
}

刷新 ngx-datatable headers

Refresh ngx-datatable headers

ngx-datatable

angular