仅应用特定过滤器时,AG 网格拒绝显示行

问题描述 投票:0回答:1

我有一个 AG 网格表,它拒绝显示行,但仅当我按用户名过滤时才显示。这是我在整个申请过程中遇到的有问题的专栏。

 {
            headerName: t.main('TABLE.HEADER.USER'),
            field: 'name',
            flex: 1,
            minWidth: 150,
            filter: true,
            filterParams: {
                filterOptions: ['contains'],
                trimInput: true,
                debounceMs: 650,
                maxNumConditions: 0,
                suppressAndOrCondition: true,
            } as ITextFilterParams,
            cellRenderer: (params: ICellRendererParams<IAuthenticatedUser>) => (
                <div className="u-display--flex u-display--flex--col">
                    <Link className="c-anchor--main u-type--sml" to={`${params.data?.userId}`}>
                        {params.data?.firstName + ' ' + (params.data?.lastName ?? '')}
                    </Link>
                    <small className="u-type--color--light-gray">{params.data?.email}</small>
                </div>
            ),
        },

过滤器中的更改是这样的(在 AG Grid 周围的包装组件内):

   const onFilterChanged = (params: FilterChangedEvent) => {
            const allFilters = params.api.getFilterModel();

            const queryParameters = [];

            for (const columnKey in allFilters) {
                if (allFilters.hasOwnProperty(columnKey)) {
                    const filter = allFilters[columnKey];

                    if (filter.filterType !== 'date') {
                        queryParameters.push(`${columnKey}=${filter.filter}`);
                    } else if (filter.filterType === 'date') {
                        queryParameters.push(`${helperService.camelToPascal(columnKey)}=${filter.dateFrom}`);
                    }
                }
            }

            const queryString = queryParameters.join('&');

            if (!withFrontEndPagination) {
                paginationStore.setSearchQuery(queryString);
            }
        };

在底部,调用 setSearchQuery 方法,该方法在 mobx 存储中设置搜索查询,当该查询更改时,会发生这种情况:

   const { loading } = useRequest(
        async () => {
             const response = await   userManagementService.getAllUsersPaginated(paginationStore.queryString);
                usersStore.setUsers(response.items);
                updatePagination(response);
        },
        [paginationStore.queryString],
        { disableGlobalLoading: true }
    );

这就是我将行传递到网格的方式:

<AGTable columns={columns} rows={usersStore.users} loading={loading} />

我遇到的问题是我的应用程序中所有网格中的所有过滤器,当我从后端获取过滤后的数据时 - 并且数据就在那里,我已经以所有可能的方式测试了它 - 数据存储在全局 mobx 存储中,ag 组件接收数据,分页显示数据在那里(例如,我得到“显示 5/36”,就好像数据在那里一样),但行根本不可见。

但是,如果我在网格组件上放置一个键并在存储数据更改时强制它重新渲染,只有这样我才能看到行(但该解决方案是不可接受的,因为我丢失了应用于网格的所有其他过滤器).

我不明白只有当我按用户名过滤时才会发生这种情况,同样的方法适用于 20 多个不同的过滤器,而且数据肯定在存储中,就像我使用所有其他过滤器时一样(这是通过分页更改以及如果我对组件应用一个键,它会显示过滤后的数据这一事实得到证实的)。

编辑:包括一个普通的表格元素来显示数据表明数据在那里,甚至在应用过滤器的网格下面包括另一个 AG 网格,显示正确的过滤数据 - 它仅在过滤器所在的网格中应用数据不会出现(但它不会显示空状态,分页仍然有效,除非您滚动浏览空页面)。另外,重申一下,只有当我应用与用户数据以某种方式相关的过滤器时(出于任何奇怪的原因)。

我注意到的另一件事是,当我删除过滤器时,有一瞬间,行数据出现,然后我看到未过滤的数据(始终显示未过滤的数据)。

如果有人能指出我正确的方向,我将不胜感激。预先感谢。

reactjs typescript ag-grid
1个回答
0
投票

我不知道答案,但由于这个详尽的问题,我能够解决我遇到的一个问题。

© www.soinside.com 2019 - 2024. All rights reserved.