我可以使用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
指令之下。我不确定你的案子是不是一样,但如果是的话,我得做些什么才能让它生效。在这个例子中,我有一个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>