如何在使用“inRange”过滤器类型的 ag-grid 中创建自定义浮动过滤器组件答案

【问题标题】：How to create custom floating filter component in ag-grid that uses "inRange" filter type如何在使用“inRange”过滤器类型的 ag-grid 中创建自定义浮动过滤器组件
【发布时间】：2020-08-07 00:17:16
【问题描述】：

我正在尝试构建一个自定义过滤器组件，该组件从文本输入控件（例如“3-5”）中获取一个范围来过滤数据。为此，我修改了ag-grid documentation 中给出的示例（参见下面的代码）。

将 onFloatingFilterChanged() 中的类型更改为 'equals'、'greaterThan'、'lessThan' 等时，一切正常。但是对于“inRange”类型，不执行过滤。

可以在 Plunkr 上找到工作示例：https://plnkr.co/edit/oHWFIaHgWIDXP0P5

import { Component } from '@angular/core';

import {
  IFloatingFilter,
  IFloatingFilterParams,
  NumberFilter,
  NumberFilterModel,
} from '@ag-grid-community/all-modules';
import { AgFrameworkComponent } from '@ag-grid-community/angular';

export interface RangeFloatingFilterParams extends IFloatingFilterParams {
  value: number;
}

@Component({
  template: `
    <input
      type="text"
      [(ngModel)]="currentValue"
      (ngModelChange)="valueChanged()"
      style="width: 70px;"
    />
  `,
})
export class RangeFloatingFilter
  implements IFloatingFilter, AgFrameworkComponent<RangeFloatingFilterParams> {
  private params: RangeFloatingFilterParams;

  public currentValue: string;

  agInit(params: RangeFloatingFilterParams): void {
    this.params = params;
    this.currentValue = '';
  }

  valueChanged() {
    let valueToUse = this.currentValue === 0 ? null : this.currentValue;
    this.params.parentFilterInstance(function(instance) {
      (<NumberFilter>instance).onFloatingFilterChanged(
        'inRange',
        valueToUse
      );
    });
  }

  onParentModelChanged(parentModel: NumberFilterModel): void {
    if (!parentModel) {
      this.currentValue = 0;
    } else {
      // note that the filter could be anything here, but our purposes we're assuming a greater than filter only,
      // so just read off the value and use that
      this.currentValue = parentModel.filter;
    }
  }
}

【问题讨论】：

您解决了这个问题吗？面临类似问题？
不，我没有。我最终得到了一个 100% 的自定义过滤器。
你能放一个plunkr吗？试图得到类似的东西

标签： filter ag-grid-angular

【解决方案1】：

自定义浮动日期选择器也面临同样的问题。我使用 setModelIntoUi 方法而不是 onFloatingFilterChanged：

instance.setModelIntoUi({
   type: 'inRange',
   dateFrom: moment(value.min).format('YYYY-MM-DD'), // you have to use exactly this date format in order for it to work
   dateTo: moment(value.max).format('YYYY-MM-DD'),
});

在你的情况下，它会是：

instance.setModelIntoUi({
   type: 'inRange',
   filter: value.min,
   filterTo: value.max,
});

UPD：添加了这一行

instance.onUiChanged(true);

在 setModelIntoUi 方法之后，由于错误：过滤器模型在第二次使用时没有更新。

【讨论】：

【解决方案2】：

instance.onFloatingFilterChanged() 中的代码仅设置第一个 from 值。使用下面的这些行来获得正确的结果，因为这是让 inRange 工作的唯一方法。

instance.setTypeFromFloatingFilter('inRange');
instance.eValueFrom1.setValue(this._input1.value);
instance.eValueTo1.setValue(this._input2.value);
instance.onUiChanged(true);

【讨论】：