如何滚动到 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装饰器来获得两者。