p-table headers 未在后续 p-tabview 上正确重置排序

Question

我有一个固定的 headers "Tags" 数组，它将动态填充为选项卡 Headers。然后我有一个 objects "data" 的数组，它将遍历每个选项卡以查看它是否匹配，如果匹配则填充 table。请在下面找到我的代码的简单摘要：

<p-tabView (onChange)="onReset()">
  <p-tabPanel [header]="tag" *ngFor="let tag of tags">
    <p-table #dt [value]="data">
      <ng-template pTemplate="header">
        <tr>
          <th [pSortableColumn]="'Name'">Name
            <p-sortIcon [field]="'Name'"></p-sortIcon>
          </th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-col>
        <tr>
          <td>{{col.Name}}</td>
        </tr>
      </ng-template>
    </p-table>
  </p-tabPanel>
</p-tabView>

我的重置函数：

import { Table } from 'primeng/table'; 
@ViewChild('dt', {static: false}) table: Table ;
onReset() {
  this.table.reset();
}

使用pSortableColumn和p-sortIcon进行排序，升序和降序没有问题。

我想在切换到其他选项卡并返回时重置 table 上的排序。但是，排序仅在第一个选项卡的 table 上重置，而不会在后续选项卡上重置。有没有人有这方面的经验？或者指出我可能做错了什么？

问题解决如下：

@ViewChildren(Table) tables: QueryList<Table>;

resetSort() {
  this.tables.forEach((table) => {
    table.reset();
  });
}

Answer 1

由于 *ngFor，您的页面中有多个 table 引用 #dt。当您使用 @ViewChild('dt', {static: false}) table: Table ; 查询 tables 时，它 returns 是预期的第一个 table。

您需要一种在当前活动的选项卡上调用 reset() 方法的方法 table 参考。

首先查询所有 tables with:

@ViewChildren(Table, {static: false}) tables: QueryList<Table>;

然后调用 onReset 选项卡事件（参见 Events here）：

<p-tabView (onChange)="onReset($event)">

然后

onReset(evt) {
  this.tables[evt.index].reset();
}

p-table headers 未在后续 p-tabview 上正确重置排序

p-table headers not resetting sorting properly on subsequent p-tabview

primeng

angular

primeng-table