如何在 ag-grid 浮动过滤器中进行服务器端过滤器答案

【问题标题】：How to do a server side filter in ag-grid floating filter如何在 ag-grid 浮动过滤器中进行服务器端过滤器
【发布时间】：2020-04-11 02:38:36
【问题描述】：

我正在使用 Ag-grid 免费版，其中我已从服务器加载数据。我已将 floatingFilter 选项设置为 true 以过滤可用数据。但我想从服务器端过滤数据（全局过滤器每列）。

我已经为来自用户的每个输入尝试了以下代码，将其存储到商店并进行服务器调用并获得响应。

但是发生了什么

this.loadData() 抛出错误“this.loadData() 不是函数”
如果输入被清除，我试图清除存储但不能做吧。

this.columnDefs = [
      { headerName: 'ID', width: 100, valueGetter: (args) => this.getIdValue(args) },
      {
        headerName: 'Action',
        field: 'action',
        filterParams: {
          filterOptions: ['contains'],
          textCustomComparator: function(filter, value, filterText) {
            const filteredText = filterText.charAt(0).toUpperCase() + filterText.slice(1);
            if (filteredText) {
              store.dispatch(new ListStoreActions.ActionFilter(filteredText));
              store.dispatch(new ListStoreActions.SetCurrentPage());
              this.loadData(); //throwing error since it is called from constructor
            } else {
              console.log('else block got called');
              store.dispatch(new ListStoreActions.RemoveActionFilter());
            }
          },
        },
        debounceMs: 2000,
        suppressMenu: true,
        floatingFilterComponentParams: { suppressFilterButton: true }
      },
      { headerName: 'Collection', field: 'collectionName'},
      { headerName: 'Date', field: 'date'},
      { headerName: 'End Point', field: 'endpoint'},
      { headerName: 'IP', field: 'ipAddress' },
      { headerName: 'Method', field: 'method' },
      { headerName: 'Status Code', field: 'statusCode' },
    ];

我在构造函数中调用上面的

我想知道我所做的方法是否正确，或者有没有更好的解决方案。

【问题讨论】：

标签： angular typescript ag-grid angular8

【解决方案1】：

this.loadData() 抛出错误'this.loadData() 不是函数'

我认为这个问题与textCustomComparator 函数内部的范围有关。将您的函数声明更改为Arrow function 语法，如下所示。

      textCustomComparator: (filter, value, filterText) => {
        const filteredText = filterText.charAt(0).toUpperCase() + filterText.slice(1);
        if (filteredText) {
          store.dispatch(new ListStoreActions.ActionFilter(filteredText));
          store.dispatch(new ListStoreActions.SetCurrentPage());
          this.loadData(); //throwing error since it is called from constructor
        } else {
          console.log('else block got called');
          store.dispatch(new ListStoreActions.RemoveActionFilter());
        }
      }

更多参考Arrow function

【讨论】：