2

我正在尝试实现自定义过滤器。我的过滤器代码是：

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

4

0 回答 0