PrimeNGツリーで選択したノードにスクロールする方法

Question

私はPrimeNGツリーとオートコンプリートフィールドを持つページを持っています。私の要件は、ユーザーがオートコンプリートフィールド内のテキストを入力して選択するときにツリーをマッチングノードに展開する必要があります。また、一致するノードまでスクロールしてノードを強調表示する必要があります。

「拡張」プロパティを「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() 
     } 
    } 
} 

メソッドにのHTMLElementとしてのDataTableとテーブル自体の参照を渡す必要があり、このメソッドを使用します。 Angular2の@ViewChildデコレータを使用して、両方を取得できます。デビッド・アッシャーの答えに拡大

Answer 2

が、これはPrimeNGのツリーの単純作業のソリューションです：

HTML：アンギュラ

<p-tree #mytreeid id="mytree"></p-tree> 

：

@ViewChild("mytree") mytree: Tree; 

// selection is the TreeNode you want to scroll into view 
scrollToSelectionPrimeNgDataTree(selection, tree, elementIdName) { 
     if (tree.value !== null) { 
      let index = tree.value.indexOf(selection); 
      document.getElementById(elementIdName).querySelectorAll("p-treenode")[index].scrollIntoView(); 
     } 
    }