在 ag-grid 中带有下拉菜单的自定义过滤器在角度 10 中不起作用答案

【问题标题】：Custom filter with dropdown in ag-grid is not working in angular 10在 ag-grid 中带有下拉菜单的自定义过滤器在角度 10 中不起作用
【发布时间】：2021-05-17 03:15:31
【问题描述】：

我在我的 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;
    }
  }
}

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

类型上不存在属性“onFloatingFilterChanged” 'TextFilterModel'。

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

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

【问题讨论】：

标签： angular ag-grid ag-grid-angular

【解决方案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;
    }

【讨论】：