angular - PrimeNG 表未重置

Question

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

HTML

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

TS

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

Answer 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>

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

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