Question

我可以使用stateStorage="local" stateKey="myKey"在本地保存过滤器。因此，当用户离开组件并返回时，仍会根据他们设置的过滤器对数据进行过滤。

问题在于，用户不知道他们正在过滤什么内容，因为过滤器标题不再显示任何内容，而只是默认标签。我可以通过本地存储访问过滤器，并使用localStorage.removeItem("myKey");删除它们，但是我一生都无法弄清楚如何获取此过滤器信息以显示在过滤器标题中。我们没有使用lazyLoad，如另一个答案中所建议。您可能会认为它会在保存过滤器的任何时间构建，因为不知道您要过滤的内容似乎是一个重大缺陷。

为更加清楚起见，我在下面附加了primeFaces文档。如果从多选下拉列表中选择“红色”，“白色”和“绿色”，它将在上方的标题（红色，白色，绿色）中显示您选择的过滤器。如果用户保存了过滤器（包括文本输入和下拉菜单），则只要用户输入组件，我就需要显示此信息。

https://www.primefaces.org/primeng/#/table/filter

我正在使用多选下拉列表过滤器，文本输入以及日历过滤器。这是html的代码段，其中包括以下三种过滤器类型的示例：

    <th *ngFor="let col of columns" [ngSwitch]="col.field">                                               
      <input *ngSwitchCase="'userID'" pInputText type="text" size="12" placeholder="contains" (input)="table.filter($event.target.value, col.field, col.filterMatchMode)" [value]="table.filters['userID'] ? table.filters['userID'].value : ''">       
      <div class="ui-g ui-fluid">
        <p-calendar #calendar1 class="ui-fluid" *ngSwitchCase="'myDate'" [monthNavigator]="true" [showOnFocus]="false" [yearNavigator]="true" yearRange="2010:2060" [showIcon]="true" 
          [showOtherMonths]="false" [showButtonBar]="true" [appendTo]="attach"  [style]="{'overflow': 'visible'}" 
          [(ngModel)]="calendar1Filter" 
          (ngModelChange)="table.filter($event, 'myDate', calendar1Option)"                                                                                 
          (onSelect)="table.filter($event, 'myDate', calendar1Option)">
            <p-footer>  
                <div class="ui-grid-row">
                    <div class="ui-grid-col-3"><label style="font-weight: bold; color: #337ab7">Mode:</label></div>                     
                    <div class="ui-grid-col-6"><p-dropdown [options]="calendar1Options" [style]="{'width':'60px', 'padding-top': '0px'}" [(ngModel)]="calendar1Option" (onChange)="onChangeModCalOpt(calendar1, 1)" ></p-dropdown> </div>
                </div>
             </p-footer>
         </p-calendar>   
       </div>                                  
      <div class="ui-fluid">
        <p-multiSelect *ngSwitchCase="'myDropdown'" appendTo="body" [options]="dropdownOptions" pInputText type="text" size="12" [style]="{'width':'100%'}" defaultLabel="All" [(ngModel)]="myDropdownFilter" (onChange)="table.filter($event.value, col.field, 'in')"></p-multiSelect>
      </div>
     </th>

Answer 1

大约一年前，我做到了；您将在下面看到它涉及一些棘手的代码，因为table元素位于*ngIf指令之下。我不确定您的情况是否相同，但是如果是这样，这就是我要做的工作。在示例中，我有一个fooTable，它在status列上有一个自定义过滤器。

foo.component.ts：

import { ChangeDetectorRef, Component, ViewChild } from "@angular/core";

@Component({
    selector    : 'foo',
    templateUrl : 'foo.component.html'
})
export class FooComponent {
    // members /////////////////////////////////////////////////////////////////////////////////////////////////////////
    showFooTable: boolean  = true;
    statusFilter: string[] = [];

    // constructor(s) //////////////////////////////////////////////////////////////////////////////////////////////////
    constructor(private cd: ChangeDetectorRef) { }

    // getters and setters /////////////////////////////////////////////////////////////////////////////////////////////
    /**
     * Due to the Angular lifecycle, we have to do some tricky things here to pull the filters from the session,
     * if they are present. The workarounds done in this function are as follows:
     *
     * 1) Wait until the element is accessible. This is not until the *ngIf is rendered, which is the second call to
     *    this function. The first call is simply 'undefined', which is why we check for that and ignore it.
     * 2) Check and see if the filters for this object are even part of the template. If not, just skip this step.
     * 3) If we find the filters in the session, then change this object's filters model to equal it and call the change
     *    detection manually to prevent Angular from throwing an ExpressionChangedAfterItHasBeenCheckedError error
     * @param fooTable the reference to the foo table template
     */
    @ViewChild('fooTable') set fooTable(fooTable: any) {
        if(fooTable != undefined) {
            let filters = fooTable.filters['status'];
            if (filters != undefined && filters.value != undefined) {
                this.statusFilter = filters.value;
            }
            this.cd.detectChanges();
        }
    }
}

foo.component.html：

<ng-container *ngIf="showFooTable">
    <div id="filters">
        <p-checkbox [(ngModel)]="statusFilter" value="up"      (onChange)="fooTable.filter(statusFilter, 'status', 'in')"></p-checkbox> Up
        <p-checkbox [(ngModel)]="statusFilter" value="down"    (onChange)="fooTable.filter(statusFilter, 'status', 'in')"></p-checkbox> Down
        <p-checkbox [(ngModel)]="statusFilter" value="unknown" (onChange)="fooTable.filter(statusFilter, 'status', 'in')"></p-checkbox> Unknown
    </div>

    <p-table #fooTable
             stateStorage="session"
             stateKey="foo-table-state">
    </p-table>
</ng-container>

Answer 2

涡轮表格过滤器可以像这样访问。 table.filters['myColumn']?.value。您将需要在标题[value]="table.filters[col.field]?.value"

中设置输入值

...
<tr>
    <th *ngFor="let col of columns" [ngSwitch]="col.field" class="ui-fluid">
        <input pInputText 
               type="text"
               (input)="table.filter($event.target.value, col.field, col.filterMatchMode)"
               [value]="table.filters[col.field]?.value">
    </th>
</tr>
...

https://www.primefaces.org/primeng/#/table/state

Answer 3

只是弄清楚了这一点。我最终要做的是将默认标签附加到这样的模型上：

<p-multiSelect [defaultLabel]="table.filters[col.field]?.value || 'All'">

如果表的状态中包含过滤器值，则会填充标签，否则默认为“全部”。

如何使用PrimeNG在标题中显示保存的过滤器？

3 个答案: