时间戳

首页 > 解决方案 > 刷新 ngx-datatable 标头

angular - 刷新 ngx-datatable 标头

问题描述

对于我正在构建的数据表，我需要使用动态标题（单击按钮时，将不同的数据加载到表中并且标题需要更改）。我正在使用它在软删除用户和普通用户之间切换（删除列更改为恢复列）。

更新行，并使用它，表的工作方式如下所述： this.rows = [...this.rows];

更新我的专栏是另一回事。我已经尝试过使用相同的方式，this.columns = [...this.columns];但这不会刷新表头。现在我拥有的是一个表，其中标题仅在后台刷新时才会更改，我似乎无法找到自己触发刷新的方法。我的表如下所示：

<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';
  }

标签： angularngx-datatable

解决方案

好吧，我又花了几个小时，但我想通了。这有点麻烦，但如果我将列 ID 设置为未定义，我可以强制刷新列。下面的代码在每次更新列标题时都有效并强制刷新（我称之为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]
}

推荐阅读