Clarity многоразовый булев фильтр - PullRequest
Новая
       7

Clarity многоразовый булев фильтр

0 голосов
/ 01 ноября 2018

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

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

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 .

1 Ответ

0 голосов
/ 01 ноября 2018

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

Итак, добавьте ввод, например @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>

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

...