数据网格清晰度中的自定义字符串过滤

我试图通过json配置生成清晰度数据网格 .

values:any = {
    columns:[
        {
            id:'name',
            type:'text',
            value:'Name',
            isFilterable:true,
            inputs:{}
        },
        {
            id:'class',
            type:'select',
            value:'Class',
            isFilterable:false,
            inputs:{
                values:['COE','SEM','MEC'],
                selectModel:'hello'
            }
        },
        {
            id:'play',
            type:'text',
            value:'Play',
            isFilterable:false,
            inputs:{}
        },
        {
            id:'status',
            type:'text',
            value:'Status',
            isFilterable:true,
            inputs:{}
        }
    ],
    rows:[
        {
            name:{type:'text',inputs:{},value:'Varun'},
            class:{type:'text',inputs:{},value:'COE'},
            play:{
                type:'modal',
                inputs:{
                    modalText:'Play',
                    modalTitle:'Playing',
                    modalBody:'Tired now'
                },
                value:''
            },
            status:{type:'text',inputs:{},value:'Done'}
        },
        {
            name:{type:'text',inputs:{},value:'Arsh'},
            class:{type:'text',inputs:{},value:'SEM'},
            play:{
                type:'modal',
                inputs:{
                    modalText:'Play',
                    modalTitle:'Playing',
                    modalBody:'Tired now'
                },
                value:''
            },
            status:{type:'text',inputs:{},value:'Pending'}
        },
        {
            name:{type:'text',inputs:{},value:'Arjun'},
            class:{type:'text',inputs:{},value:'MEC'},
            play:{
                type:'modal',
                inputs:{
                    modalText:'Play',
                    modalTitle:'Playing',
                    modalBody:'Tired now'
                },
                value:''
            },
            status:{type:'text',inputs:{},value:'Done'}
        },
        {
            name:{type:'text',inputs:{},value:'Rishab'},
            class:{type:'text',inputs:{},value:'COE'},
            play:{
                type:'modal',
                inputs:{
                    modalText:'Play',
                    modalTitle:'Playing',
                    modalBody:'Tired now'
                },
                value:''
            },
            status:{type:'text',inputs:{},value:'Rejected'}
        },
        {
            name:{type:'text',inputs:{},value:'Appy'},
            class:{type:'text',inputs:{},value:'SEM'},
            play:{
                type:'modal',
                inputs:{
                    modalText:'Play',
                    modalTitle:'Playing',
                    modalBody:'Tired now'
                },
                value:''
            },
            status:{type:'text',inputs:{},value:'Done'}
        },
        {
            name:{type:'text',inputs:{},value:'Varun'},
            class:{type:'text',inputs:{},value:'COE'},
            play:{
                type:'modal',
                inputs:{
                    modalText:'Play',
                    modalTitle:'Playing',
                    modalBody:'Tired now'
                },
                value:''
            },
            status:{type:'text',inputs:{},value:'Done'}
        },
        {
            name:{type:'text',inputs:{},value:'Arka'},
            class:{type:'text',inputs:{},value:'COE'},
            play:{
                type:'modal',
                inputs:{
                    modalText:'Play',
                    modalTitle:'Playing',
                    modalBody:'Tired now'
                },
                value:''
            },
            status:{type:'text',inputs:{},value:'Pending'}
        },
    ],
    footer:{
        pageSizeList:[5,10,15,20],
        item:'students'
    }
}

我的HTML代码是

<clr-dg-column *ngFor="let column of columns">
    <div [ngSwitch] = "column.type">
        <div *ngSwitchCase="'text'">
            {{column.value}}
            <clr-dg-string-filter (click)="gridFilter.columnId=column.id" *ngIf="column.isFilterable" [clrDgStringFilter]="gridFilter"></clr-dg-string-filter>
        </div>
        <div *ngSwitchCase="'select'">
            <lcm-select-box [values]="column.inputs.values"
            [selectModel]="column.inputs.selectModel"></lcm-select-box>
        </div>
    </div>
</clr-dg-column>
<clr-dg-row *clrDgItems="let row of rows">
    <clr-dg-cell *ngFor="let column of columns">
        <div [ngSwitch]="row[column.id].type">
            <div *ngSwitchCase="'text'">
                {{row[column.id].value}}
            </div>
            <div *ngSwitchCase="'modal'">
                <lcm-modal [modalText]="row[column.id].inputs.modalText" 
                [modalTitle]="row[column.id].inputs.modalTitle" 
                [modalBody]="row[column.id].inputs.modalBody"></lcm-modal>
            </div>
        </div>
    </clr-dg-cell>
</clr-dg-row>

最后我的gridFilter是

class GridFilter implements StringFilter<any>{
    columnId;
    accepts(row: any, search: string):boolean {
        console.log(row);
        console.log(search);
        console.log(this.columnId);
        console.log(row[this.columnId].value);
        return row[this.columnId].value.toLowerCase().indexOf(search)>=0;
    }
}

现在的问题是因为我不能使用clrDgField进行自动过滤，因为行的属性是对象而不是字符串 .

所以为了克服这一点，我制作了一个自定义过滤器，它根据行对象的值进行过滤 .

问题是，当我在单个列上仅应用过滤器时，它可以正常工作，但对于两列上的过滤器，它会失败并且不会显示任何结果 .

Here is the original image of the grid

This is when I apply a single filter

This happens when filters are applied on two columns