Question

我有一组固定的标头“标签”，这些标头将被动态地填充为“ Tab标头”。然后，我有了对象“数据”的数组，该数组将在每个选项卡中循环查看是否匹配，如果匹配则填充表。请在下面找到我的代码的简单摘要：

<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进行排序，升序和降序都没有问题。

当我切换到其他选项卡并返回时，我想重置表格上的排序。但是，排序仅在第一个选项卡的表上被重置，而不在随后的选项卡上被重置。有人对此有经验吗？还是指出我做错了什么？

问题已通过以下方式解决：

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

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

Answer 1

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

您需要一种方法来调用当前活动标签页表引用上的reset()方法。

首先使用以下命令查询所有表

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

然后使用标签事件调用onReset（请参见事件 here）：

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

然后

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

p表头未在后续p-tabview上正确重置排序

1 个答案: