使用angular2的银栅外部滤波器
我想用angular2在ag网格上实现外部滤波 ag网格似乎没有实现外部过滤器和。是否有一种方法可以使用angular2在ag电网中实现外部滤波器 我有以下资料: 模板:使用angular2的银栅外部滤波器,angular,ag-grid,Angular,Ag Grid,我想用angular2在ag网格上实现外部滤波 ag网格似乎没有实现外部过滤器和。是否有一种方法可以使用angular2在ag电网中实现外部滤波器 我有以下资料: 模板: <input (keyup)="updateFilters($event)" name="filterAgreementNumber" #filterAgreementNumber/> <ag-grid-ng2 #agGrid style="width: 100%;" [
<input (keyup)="updateFilters($event)" name="filterAgreementNumber" #filterAgreementNumber/>
<ag-grid-ng2 #agGrid
style="width: 100%;"
[style.height.px]="height"
class="ag-fresh"
[gridOptions]="gridOptions"
[rowData]="promises"
(window:resize)="onResize($event)">
export class PromisesListComponent {
private gridOptions: GridOptions;
private promises: Promise[];
filterAgreementNumber = '';
constructor(private promisesService: PromisesService) {
this.gridOptions = {
rowData: this.promises,
columnDefs: this.createColumnDefs(),
enableColResize: true,
enableSorting: true,
enableFilter: true,
isExternalFilterPresent: this.externalFilterPresent,
doesExternalFilterPass: this.externalFilterPass,
}
updateFilters(event: any) {
this.filterAgreementNumber = event.target.value; //correctly assigns property
this.gridOptions.api.onFilterChanged();
}
externalFilterPass(node: any) {
console.log(this.getFilterAgreementNumber); //undefined
if (this.filterAgreementNumber && this.filterAgreementNumber.length > 0)
if (node.data.AgreementCode.indexOf(this.filterAgreementNumber) === -1)
return false;
return true;
}
}
我遇到的问题是externalFilterPass
中的这个引用了ag网格节点,我无法访问class属性。您是否在类的上方添加了@Injectable()
此外:
重写gridOptions函数,如下所示:
..., doesExternalFilterPass: (node) => { return this.doesExternalFilterPass(this, node); }, ...
并在课堂上使用:
private doesExternalFilterPass(gcs, node): boolean {
if (<GridRowStatus>gcs.gridActionsService.filter) {
console.log(gcs.gridActionsService.filter);
console.log(node.data);
return gcs.rowStatusService.contains(node.data, [gcs.gridActionsService.filter]);
} else {
return true;
}
}
private doesternalfilterpass(gcs,节点):布尔值{
if(gcs.gridActionsService.filter){
日志(gcs.gridActionsService.filter);
console.log(node.data);
返回gcs.rowStatusService.contains(node.data[gcs.gridActionsService.filter]);
}否则{
返回true;
}
}
在构造函数中,而不是
this.gridOptions = {
...
isExternalFilterPresent: this.externalFilterPresent,
doesExternalFilterPass: this.externalFilterPass
}
试一试
现在可以从ag网格方法中访问组件上下文,并且这将是您所期望的
来源:
如果您考虑另一种选择,PrimeNG DataTable具有外部过滤特性。
this.gridOptions = {
...
isExternalFilterPresent: this.externalFilterPresent.bind(this),
doesExternalFilterPass: this.externalFilterPass.bind(this)
}