ag-grid 中带有下拉列表的自定义过滤器在 angular 10 中不起作用

Question

我在我的 angular 应用程序中使用 ag-grid 创建了一个网格。有一列名称为类别。此列的行只能包含 A 或 B 或 C 值。现在我想创建一个自定义过滤器，下拉菜单包含 A、B 和 C 值。代码如下：

组件HTML:

<select [(ngModel)]="currentValue" (ngModelChange)="valueChanged()" class="form-control">
    <option value=""></option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>

组件 TS:

import { Component, OnInit } from '@angular/core';
import { AgFrameworkComponent } from 'ag-grid-angular';
import { FilterChangedEvent, IAfterGuiAttachedParams, IFloatingFilter, IFloatingFilterParams, TextFilterModel } from 'ag-grid-community';

export interface SelectFloatingFilterParams extends IFloatingFilterParams {
  selectedValue: string;
}

@Component({
  selector: 'app-category-floating-filter',
})
export class CategoryFloatingFilterComponent implements IFloatingFilter, AgFrameworkComponent<SelectFloatingFilterParams> {
  params: SelectFloatingFilterParams;
  currentValue: string;

  agInit(params: SelectFloatingFilterParams): void {
    this.params = params;
    this.currentValue = this.params.selectedValue;
  }

  valueChanged() {
    let valueToUse = this.currentValue === '' ? null : this.currentValue;
    this.params.parentFilterInstance((instance: TextFilterModel) =>
      instance.onFloatingFilterChanged('equals', valueToUse === '' ? null : valueToUse));
  }

  onParentModelChanged(parentModel: TextFilterModel): void {
    if (!parentModel) {
      this.currentValue = "";
    }
    else {
      this.currentValue = parentModel.filter;
    }
  }
}

但是在编译期间我收到如下错误：

Property 'onFloatingFilterChanged' does not exist on type 'TextFilterModel'.

24 instance.onFloatingFilterChanged('equals', valueToUse === '' ? null : valueToUse));

这意味着 onFloatingFilterChanged 在 TextFilterModel class 中不存在。那么我如何在从下拉列表中选择一个值后过滤网格。谁能帮帮我。

Answer 1

我找到了答案。代码如下：

agInit(params: SelectFloatingFilterParams): void {
    this.params = params;
    this.currentValue = this.params.selectedValue;
  }

  valueChanged() {
    let valueToUse = this.currentValue === '' ? null : this.currentValue;
    this.params.parentFilterInstance((instance: TextFilter) =>
      instance.onFloatingFilterChanged('equals', valueToUse === '' ? null : valueToUse));
  }

  onParentModelChanged(parentModel: TextFilterModel): void {
    if (!parentModel) {
      this.currentValue = "";
    }
    else {
      this.currentValue = parentModel.filter;
    }

ag-grid 中带有下拉列表的自定义过滤器在 angular 10 中不起作用

Custom filter with dropdown in ag-grid is not working in angular 10

ag-grid

angular

ag-grid-angular