我正在尝试实现自定义过滤器。我的过滤器代码是:
import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
import { Filter } from "@clr/angular";
import { DatagridFilter } from "@clr/angular";
import { Subject } from "rxjs/Subject";
@Component({
selector: "app-datagrid-filter"
})
export class AppDatagridFilter {
changes = new Subject<any>();
isActive(): boolean {
return true;
}
accepts(item: any): boolean {
return true;
}
filter() {
console.log('tst');
}
}
在父代码中,它被实施为:
private datagridFilter = new AppDatagridFilter();
在父html文件中,我正在调用自定义过滤器:
<clr-dg-column *ngFor="let column of (gridData$ | async)?.columnDefs">
{{ column.name }}
<clr-dg-filter [clrDgFilter]="datagridFilter">
<app-datagrid-filter #datagridFilter></app-datagrid-filter>
</clr-dg-filter>
</clr-dg-column>
我从clr-angular.js
收到此错误消息ERROR TypeError: Cannot read property 'subscribe' of undefined
at FiltersProvider.add (clr-angular.js:3388)
at ClrDatagridFilter.DatagridFilterRegistrar.setFilter (clr-angular.js:3465)
at ClrDatagridFilter.set [as customFilter] (clr-angular.js:3506)
at updateProp (core.js:12661)
at checkAndUpdateDirectiveInline (core.js:12368)
at checkAndUpdateNodeInline (core.js:13935)
at checkAndUpdateNode (core.js:13878)
at debugCheckAndUpdateNode (core.js:14771)
at debugCheckDirectivesFn (core.js:14712)
at Object.eval [as updateDirectives] (DatagridComponent.html:31)
clr-angular.js片段:
FiltersProvider.prototype.add = function (filter) {
var _this = this;
var index = this._all.length;
var subscription = filter.**changes**.subscribe(function () { return _this.resetPageAndEmitFilterChange([filter]); });
我正在关注可重用过滤器的示例:
https://vmware.github.io/clarity/documentation/v0.11/datagrid/custom-filtering