使用自定义过滤器时,我会清楚地收到此错误消息: 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);
});
...