Question

我有一个网格，它可以具有多个布尔过滤器，我想为其创建一个可重复使用的过滤器。

以下示例使我可以按首都和非首都过滤城市：

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的尝试。

Answer 1

您已经很接近了，您真正需要的就是输入要接受检查的属性并使之可重用的输入。

因此，将@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。

清晰可重用的布尔过滤器

1 个答案: