PrimeNG 表未重置答案

【问题标题】：PrimeNG table is not resettingPrimeNG 表未重置
【发布时间】：2018-10-16 15:25:39
【问题描述】：

在 PrimeNG 表上应用重置方法会重置图标，但不会重置数据。

HTML

<button (click)="onReset(dt)">Reset Table</button>

onReset = (table) => {
    table.reset();
}

【问题讨论】：

查看stackoverflow.com/a/39451542/4868839
这对我不起作用。我正在使用 p 表。我试图@ViewChild(Table) table: Table;然后 this.table.reset();
尝试更改 onReset 函数，将箭头运算符删除为onReset(table){}
检查this
不成功。 #dt 中我的桌子上的引用，组件文件 @ViewChild('dt') dt: Table;我的重置函数 onResetDataTable () { this.dt.reset() }。我的表格数据仍然没有变回原来的状态。

标签： angular primeng primeng-turbotable

【解决方案1】：

这是我的模板代码，它的工作就像一个魅力：

<p-table #tt [columns]="cols" [value]="rowData" sortField="Id" [paginator]="true" [rows]="10" [lazy]="true"
(onLazyLoad)="loadListLazy($event)" [totalRecords]="totalRecords" [responsive]="true">
<ng-template pTemplate="header" let-columns>
    <tr>
        <th *ngFor="let col of columns" class="ui-table-thead-filter" [ngSwitch]="col.field">
            <input *ngSwitchCase="'Id'" class="form-control" pInputText type="text" style="width: 100%" (input)="tt.filter($event.target.value, col.field, col.filterMatchMode)">
            <input *ngSwitchCase="'Name'" class="form-control" pInputText type="text" style="width: 100%" (input)="tt.filter($event.target.value, col.field, col.filterMatchMode)">
            <p-button class="btn btn-cancel" *ngSwitchCase="'Actions'" label="Clear filters" (click)="tt.reset()"></p-button>
        </th>
    </tr>
    <tr>
        <th *ngFor="let col of columns" [pSortableColumn]="col.field"
            [pSortableColumnDisabled]="col.field === 'Actions'">
            {{col.header}}
            <p-sortIcon *ngIf="col.field !== 'Actions'" [field]="col.field"></p-sortIcon>
        </th>
    </tr>

</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
        <td>{{rowData["Id"]}}</td>
        <td>{{rowData["Name"]}}</td>
        <td class="text-center">
            <input pButton (click)="onEdit(rowData['Id'])" value="Edit" class="btn btn-sm btn-edit" />
        </td>
    </tr>
</ng-template>

你不需要在 typescript 中做任何事情。只有 tt.reset()

但我还有一个问题要问大家。 tt.reset() 函数不清除过滤器输入。有什么简单的方法或者我需要创建函数，例如： clearAllFilters() {} 并手动清除搜索栏中的每个输入？

【讨论】：