我可以使用stateStorage="local"stateKey="myKey"在本地保存过滤器。因此,当用户离开组件并返回时,数据仍然根据他们设置的过滤器进行过滤。
问题是,用户已经不知道他们在过滤什么了,因为过滤头不再显示任何内容,只显示默认标签。我可以通过本地存储访问筛选器,并使用localStorage.removeItem("myKey");将其删除,但在我的有生之年,我无法弄清楚如何将此筛选器信息显示在筛选器标题中。我们并没有像另一个答案中所建议的那样使用懒汉。你会认为这将建立在任何时候一个过滤器被保存,因为不知道你是什么过滤似乎是一个主要的缺陷。
为了更清楚,我附上了下面的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>

最佳答案

我差不多一年前就这样做了;正如您将在下面看到的,它涉及一些复杂的代码,因为table元素位于*ngIf指令之下。我不确定你的案子是不是一样,但如果是的话,我得做些什么才能让它生效。在这个例子中,我有一个fooTablestatus列上有一个自定义过滤器。
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>

10-06 04:03
查看更多