时间戳

首页 > 解决方案 > Angular PrimeNG p-tree - 如何通过其 id 以编程方式聚焦节点？

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

问题描述

我有一个带有类别的 p 树。当我使用类别 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]"它工作正常。但我想动态地做到这一点。

问题是什么 ？

标签： angularfocusprimengtreenode

解决方案

事实上，为了能够自动关注一个节点，您不需要它的 ID，在 Prime 版本 7.0.5 中，您可以使用“selection”属性并将其与您的节点相同以关注。

更多细节：

在树-ex.html 中：

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

在树-ex.ts 中：

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

推荐阅读