Angular PrimeNG p-tree - 如何通过其 id 以编程方式聚焦节点？答案

【问题标题】：Angular PrimeNG p-tree - How to focus node programmatically by its id?Angular PrimeNG p-tree - 如何通过其 id 以编程方式聚焦节点？
【发布时间】：2019-01-28 14:46:39
【问题描述】：

我有一个带有类别的 p-tree。当我导航到具有类别 ID 的类别页面时，我希望 p-tree 专注于所需的类别。

HTML

     <p-tree  *ngIf="categoriesTree" [value]="categoriesTree" selectionMode="single"   [selection]="getselectedCategory()" (onNodeSelect)="categorySelected($event)" ></p-tree>

我试图在 [selection] attr 处设置一个函数并返回一个节点，但它不起作用。

函数

    public getselectedCategory(){
        this.sortService.CategoryObjectOut.subscribe(val=>{
          for(let i =0; i< this.categoriesTree.length;i++){
            if(this.categoriesTree[i] == val.node){
              this.selectedCategory=val
              return this.selectedCategory.node;
            }
          }
        })
      }

例如，如果我设置 [selected]="categoriesTree[0]" 它工作正常。但我想动态地做。

有什么问题？

【问题讨论】：

我通过将全局参数添加到 [selected]="categoriesTree[X]" 解决了我的问题，当我到达此页面时，我发送所需类别的索引号 (X)。

标签： angular focus primeng treenode

【解决方案1】：

事实上，为了能够自动关注一个节点，你不需要它的 ID，在 Prime 7.0.5 中，你可以使用“selection”属性并赋予它与你的节点相同的关注焦点.

更多详情：

在 tree-ex.html 中：

     <p-tree
      [value]="nodes"
      selectionMode ="single"
      [(selection)] ="selectedNode">
    </p-tree>

在树-ex.ts 中：

    selectedNode :TreeNode;
    //do something with selectedNode 
    selectedNode = this.selectedNode;

【讨论】：