Пользовательская фильтрация строк в ясности сетки данных

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 для автоматической фильтрации, поскольку свойства строк являются объектами, а не строкой.

Чтобы преодолеть это, я создал собственный фильтр, который фильтрует по значению объекта строки.

Проблема в том, что он работает нормально, когда я применяю только фильтр к одному столбцу, но для фильтров по двум столбцам происходит сбой и результат не отображается.

Вот исходное изображение сетки

Это когда я применяю один фильтр

Это происходит, когда фильтры применяются к двум столбцам

Answer 1

Как сказано в документации,

Вы можете привязать свойство к вашей модели настолько глубоко, насколько захотите, используя стандартный синтаксис, разделенный точками: [clrDgField]="'my.deep.property'"

Так что в вашем случае вы можете полностью обойти пользовательские фильтры и просто связать [clrDgField]="column.id + '.value'",

Относительно того, почему ваши пользовательские фильтры дают сбой, трудно разобраться без работающего примера, скриншоты не передают достаточно информации.