Многоразовый логический фильтр Clarity

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

Следующий пример позволяет мне фильтровать города по столицам и не по столицам:

import { Component } from '@angular/core';
import { ClrDatagridFilterInterface } from '@clr/angular';
import { Subject } from 'rxjs';

@Component({
    selector: 'app-boolean-filter',
    template: `
        <clr-checkbox [(clrChecked)]="trueChecked" (clrCheckedChange)="onCheckedTrue($event)" [clrAriaLabeledBy]="'Yes'">
            Yes
        </clr-checkbox>
        <clr-checkbox [(clrChecked)]="falseChecked" (clrCheckedChange)="onCheckedFalse($event)" [clrAriaLabeledBy]="'No'">
            No
        </clr-checkbox>
        `
})
export class BooleanFilterComponent implements ClrDatagridFilterInterface<any> {
    trueChecked = true;
    falseChecked = true;

    changes = new Subject<any>();

    isActive(): boolean {
        return true;
    }

    accepts(value: any) {
        const { capital } = value;

        return (capital && this.trueChecked) || (!capital && this.falseChecked);
    }

    onCheckedTrue(value: any) {
        this.changes.next();
    }

    onCheckedFalse(value: any) {
        this.changes.next();
    }
}

И вот как я его использую:

<clr-dg-column [clrDgField]="'capital'">
    Capital
    <clr-dg-filter [clrDgFilter]="capitalFilter" >
        <app-boolean-filter #capitalFilter class="boolean-filter"></app-boolean-filter>
    </clr-dg-filter>
</clr-dg-column>

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

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

Моя текущая попытка использовать Stackblitz.


angular vmware-clarity
person Evaldas Buinauskas    schedule 01.11.2018    source источник
comment
Просто примечание, это действительно помогает предоставить Stackblitz рабочий пример, чтобы людям было легче увидеть, что вы делаете, на реальном примере.   -  person Jeremy Wilken    schedule 01.11.2018
comment
@JeremyWilken Отметил, скоро предоставлю его.   -  person Evaldas Buinauskas    schedule 01.11.2018
comment
@JeremyWilken Спасибо. Добавили рабочий пример.   -  person Evaldas Buinauskas    schedule 01.11.2018

Ответы (1)


arrow_upward
4
arrow_downward

Вы довольно близки, все, что вам действительно нужно, это ввод, чтобы принять, какое свойство проверять и сделать его многоразовым.

Поэтому добавьте ввод типа @Input() prop: string; в свой BooleanFilterComponent, а затем в своем accepts() методе вы можете ссылаться на него следующим образом:

accepts(value: City) {
  const state = value[this.prop]; // Note: this only works for top level properties
  return (state && this.trueChecked) || (!state && this.falseChecked);
}

Затем вы просто передадите имя свойства компоненту фильтра, например:

<app-boolean-filter prop="capital" #capitalFilter class="boolean-filter"></app-boolean-filter>

Посмотрите, как ваш stackblitz работает с этими изменениями: https://stackblitz.com/edit/angular-dqumyb?file=src%2Fapp%2Fapp.component.html.

person Jeremy Wilken    schedule 01.11.2018
comment
Довольно просто. Замечательно. Спасибо! - person Evaldas Buinauskas; 01.11.2018