angular - 如何滚动到 PrimeNG 树中的选定节点

Question

我有一个包含 PrimeNG 树和自动完成字段的页面。我的要求是当用户在自动完成字段中输入和选择文本时，树应该扩展到匹配节点，并且它应该滚动到匹配节点并突出显示该节点。

我试图通过将“expanded”属性设置为“true”来扩展树。但我没有找到滚动到选定节点的方法。对此的任何帮助表示赞赏。

如果有任何方法可以使用选定节点扩展树，请告诉我。

Answer 1

可能不是最漂亮的解决方案，但您可以使用以下 util 方法实现。

 public scrollToSelectionPrimeNgDataTable(table: DataTable, element: HTMLElement) {
    if (table.selection !== null && table.value !== null) {
        let index = table.value.indexOf(table.selection);
        let list = document.querySelectorAll('tr');
        if (list !== null && index < list.length) {
            let targetElement = list.item(index);
            targetElement.scrollIntoView()
        }
    }
}

要使用此方法，您必须将 DataTable 的引用和表本身作为 HTMLElement 传递给该方法。您可以通过使用 Angular2 的 @ViewChild 装饰器来获得两者。