0

我有一组固定标题“标签”，它们将作为选项卡标题动态填充。然后我有一个对象数组“数据”，它将在每个选项卡中循环以查看它是否匹配，如果匹配，将填充表。请在下面找到我的代码的简单摘要：

<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();
  });
}
4

1 回答 1

0

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

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

首先查询所有表：

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

然后onReset使用选项卡事件调用（请参阅此处的事件 ）：

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

然后

onReset(evt) {
  this.tables[evt.index].reset();
}
于 2020-05-14T13:25:45.130 回答