使用以下示例使用自定义过滤器时,我清楚地收到此错误消息: https ://vmware.github.io/clarity/documentation/v0.11/datagrid/custom-filtering
错误类型错误:无法读取未定义的属性“订阅”错误出现在第一行:
<clr-dg-column *ngFor="let column of (gridData$ | async)?.columnDefs" [clrDgField]="'column.name'">
{{ column.name }}
<clr-dg-filter [clrDgFilter]="datagridFilter">
<app-datagrid-filter #datagridFilter></app-datagrid-filter>
</clr-dg-filter>
</clr-dg-column>
如果我删除#datagridFilter,错误就会消失,但过滤器输入不会显示。
DatagridFilter 定义为:
import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
import {Filter} from "clarity-angular/data/datagrid/interfaces/filter";
import {Subject} from "rxjs/Subject";
@Component({
selector: "app-datagrid-filter"
})
export class DatagridFilter implements Filter<any> {
changes = new Subject<any>();
constructor(public prop: any) {
this.prop = prop;
}
isActive(): boolean {
return true;
}
accepts(item: any):boolean {
return true;
//return item.indexOf(search) > -1 || item.filter(i => i.indexOf(search) > -1)[0]
}
}
DatagridFilter 在父组件中进一步实例化。片段:
export class DatagridComponent implements OnInit {
count: number = 10;
gridData$: Observable<any>;
reportAction$: Observable<any>;
formDefinition$: any;
totalRecords$: Observable<number>;
selected: any = [];
datagridFilter: any;
......
ngOnInit() {
......
this.gridData$.subscribe(data => {
this.datagridFilter = new DatagridFilter(data.columnDefs);
});
...