我想用angular2在ag-grid上实现外部过滤。
在github上的ag-grid示例似乎没有实现外部过滤器,类似的问题尚未得到回答。有没有一种方法可以在agg -grid中使用angular2实现外部过滤器?
我有以下内容:
模板:
<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
中的this
指的是ag-grid节点,我无法访问类属性。
在构造函数中,而不是
this.gridOptions = {
...
isExternalFilterPresent: this.externalFilterPresent,
doesExternalFilterPass: this.externalFilterPass
}
试
this.gridOptions = {
...
isExternalFilterPresent: this.externalFilterPresent.bind(this),
doesExternalFilterPass: this.externalFilterPass.bind(this)
}
现在组件上下文将可以从ag-grid方法中访问,并且this
将是您所期望的。
来源:https://stackoverflow.com/a/41965934/6432429
你是否在你的类上面添加了@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;
}
}