角度树组件的具有弹性高度的虚拟滚动缺少树数据答案

【问题标题】：Missing tree data with virtual scroll with flex height for angular-tree-component角度树组件的具有弹性高度的虚拟滚动缺少树数据
【发布时间】：2019-09-27 16:44:16
【问题描述】：

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

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

如果我打开最后一个 rootDynamic49 节点，则只有 20 个子节点可见。然而，它有50个孩子。另一方面，当我将高度设置为100px 时，所有的孩子都是可见的。

有没有一种方法可以让我将第一个 div 固定在顶部位置并仅为具有灵活高度的树添加滚动？

【问题讨论】：

标签： angular tree angular-tree-component

【解决方案1】：

当您使用height: 100%; 并展开树时，虚拟滚动的视口高度不会更新到树的新高度。它保持在 px 的值。我们可以完全省略这个 css，而是在 container 中设置 height，使用 display: grid;

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% 它将根据其内容和整个 div会滚动到视野之外。

那么您只需在tree-container 上使用display: inline;，使其适合主div。

angular-tree.component.css

.tree-container {
    display: inline;
}

注意：我使用22.4 表示nodeHeight，因为在检查节点时，高度正好是22.4px。

这是StackBlitz 上的一个工作示例。这是相同的preview。

【讨论】：