Question

我正在使用Ag-grid免费版，其中我已从服务器加载数据。我已将floatFilter选项设置为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' },
    ];

我在构造函数中调用以上

我想知道我所采用的方法是正确的还是有更好的解决方案。

Answer 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的更多参考

如何在农业网格浮动过滤器中进行服务器端过滤器

1 个答案: