Clarity datagrid自定义筛选器问题：错误类型错误：无法读取属性'；订阅'；在FiltersProvider.add中未定义的(

我正在尝试实现自定义筛选器。我的筛选器代码为：

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');
    }

}

在父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代码段：

FiltersProvider.prototype.add = function (filter) {
    var _this = this;
    var index = this._all.length;
    var subscription = filter.**changes**.subscribe(function () { return _this.resetPageAndEmitFilterChange([filter]); });

下面是可重用过滤器的示例：

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)

FiltersProvider.prototype.add = function (filter) {
    var _this = this;
    var index = this._all.length;
    var subscription = filter.**changes**.subscribe(function () { return _this.resetPageAndEmitFilterChange([filter]); });