Angular ag-grid：延迟加载列数据

发布于 2025-01-12 17:27:50 字数 460 浏览 1 评论 0原文

我有一个特殊的问题需要解决。我使用的是 ag-grid 企业版，数据使用 Angular/NgRx 和后端的 SpringBoot 加载到网格中。网格中有 10 列，其中 9 列很容易从数据库加载。剩余的列在后端处理起来有点复杂，并且它阻碍了整体网格加载时间。

这就是我正在寻找的：

是否可以在 ag-grid 中检索 9 个简单列并加载网格，并且作为数据，剩余列可用，然后刷新网格。因此，完整的网格加载速度很快，并且在数据可用后仅更新一列。
我也尝试过主从模型，但我需要将其视为一列，并且应该根据其值进行过滤。
我尝试查看多个来源，包括 Angular - ag-grid - 动态添加列但我无法找到任何有用的指针。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

白衬杉格子梦 2025-01-19 17:27:50

将您的查询分为两部分：

第一个查询将加载 9 列的数据并填充网格。第 10 列将具有一些占位符值。
第二个查询将加载剩余列的值，完成后，您可以像这样更新网格数据：

const withCol10 = [
{
    id: 1,
    col10: 42
}
// ...
];
this.gridApi.forEachNode(rowNode => {
  const original = rowNode.data;
  const updated = withCol10.find(i => i.id === original.id);
  if (!updated) {
    rowNode.setData({
      ...original,
      ...updated
    });
  }
});

请参阅文档了解更多详细信息。

Split your query in two:

The first will load the data with 9 columns and fill the grid. The 10th column will have some placeholder value.
The second query will load values of the remaining column and once completed, you can update grid data like this:

const withCol10 = [
{
    id: 1,
    col10: 42
}
// ...
];
this.gridApi.forEachNode(rowNode => {
  const original = rowNode.data;
  const updated = withCol10.find(i => i.id === original.id);
  if (!updated) {
    rowNode.setData({
      ...original,
      ...updated
    });
  }
});

See docs for more details.

回复收藏 0 原文

~没有更多了~