angular - Angular 树组件的弹性高度虚拟滚动缺少树数据

Question

我正在尝试为具有虚拟滚动的树使用弹性高度。但是，当我将树容器设置为 100% 并设置 flex 高度时，滚动期间屏幕上的数据 block 丢失了。

我在这里添加了工作示例 https://stackblitz.com/edit/angular-d2mavw

如果我打开最后一个 rootDynamic49 节点，则只能看到 20 个子节点。但是，它有 50 个 child 。另一方面，当我将高度设置为 100px 时，所有子项都可见。

有没有办法让第一个 div 固定在顶部位置，并只为具有灵活高度的树添加滚动条？

Answer 1

当您使用 height: 100%; 并伸展树(Splay Tree)时，虚拟滚动的视口(viewport)高度不会更新为树的新高度。它保持在它的 px 值。我们可以完全省略此 css，而是使用 display: grid;

在 container 中设置 height

app.component.css

.container {
    border: 1px solid black;
    display: grid;
    grid-template-rows: auto calc(100vh - 38.4px); // StackBlitz adds 8px padding to body and 'First div' has a height of 22.4px (8 + 8 + 22.4 = 38.4px).
}

calc(100vh - 38.4px) 需要替换为您想要的高度。在此处使用 % 值似乎违反了您在 OP 中提到的关于“第一个 div”被固定在顶部位置的内容，因为如果 div 被赋予 100% 它将根据其内容进行拉伸(stretch)，整个 div 将滚出 View 。

然后您需要做的就是在 tree-container 上使用 display: inline; 使其适合主 div。

angular-tree.component.css

.tree-container {
    display: inline;
}

注意:我为 nodeHeight 使用了 22.4，因为在检查节点时，高度正好是 22.4px.

这是关于 StackBlitz 的工作示例.这是一个 preview相同。