带有自定义过滤器的filterFunction

Question

自定义筛选器组件不调用filterFunction方法。

我尝试在自定义组件中将一个filterFunction分配给this.column。我尝试在filter对象的配置中设置filterFunction。

createdOn: {
        title: 'Created On',
        valuePrepareFunction: (createdOn) => {
          return this.datePipe.transform(createdOn.toDate(),'dd.MM.yy, 
                   HH:mm');
        },
        filterFunction: (value, query) => {
          value = this.datePipe.transform(value.toDate(), 'dd.MM.yy');
          return value.indexOf(query) >= 0;
        },
        filter: {
          type: 'custom',
          component: DateFilterComponent
        }
    }

Answer 1

这是我关于按日期筛选的解决方案：

settings = {
    columns: {
        createDatetime: {
            title: 'Date Submitted',
            filter: {
                type: 'custom',
                component: DateFilterComponent,
            },
            valuePrepareFunction: (created) => {
                return this.datePipe.transform(new Date(created), 'MM/dd/yyyy');
            },
        }
    }
};

<ng2-smart-table [settings]="settings" [source]="..."></ng2-smart-table>

别忘了：类型:过滤器中的“自定义”

和DateFilterComponent组件：

import { Component, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { FormControl } from '@angular/forms';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/skip';
import { DefaultFilter } from 'ng2-smart-table';
import { debounceTime, distinctUntilChanged, skip } from 'rxjs/operators';

@Component({
    selector: 'date-filter',
    template: `<input [formControl]="inputControl" class="form-control" type="date" />`
})
export class DateFilterComponent extends DefaultFilter implements OnInit, OnChanges {
    inputControl = new FormControl('');

    constructor() {
        super();
    }

    ngOnInit() {
        this.inputControl.valueChanges
            .pipe(
                distinctUntilChanged(),
                debounceTime(this.delay),
            )
            .subscribe((value: number) => {
                this.query = value !== null ? this.inputControl.value.toString() : '';
                this.setFilter();
            });
    }

    ngOnChanges(changes: SimpleChanges) {
        if (changes.query) {
            this.query = changes.query.currentValue;
            this.inputControl.setValue(this.query);
        }
    }
}