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

Question

我正在尝试通过 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

Answer 1

正如documentation 所说，

您可以使用标准的点分隔语法在模型中绑定任意深度的属性：[clrDgField]="'my.deep.property'"

因此，在您的情况下，您可以完全绕过自定义过滤器并简单地绑定 [clrDgField]="column.id + '.value'"。

至于您的自定义过滤器失败的原因，如果没有运行示例，很难调查，屏幕截图无法传达足够的信息。