PrimeNg TreeSelect：如何通过代码方式选中节点

你需要通过绑定选中值并初始化选中数组的方式实现，具体步骤如下：

原组件代码 #

<p-treeSelect
          selectionMode="checkbox"
          [options]="nodes"
          (onNodeSelect)="onSelectedChange($event)"
          placeholder="Select"
></p-treeSelect>

实现步骤 #

1. 绑定选中值属性
   TreeSelect的复选框模式需要通过[(ngModel)]（模板驱动表单）或formControl（响应式表单）绑定选中节点集合，这个集合是数组类型。

2. 初始化选中节点数组
   根据你的nodes数据结构，把需要默认选中的节点对象（或节点的value字段，取决于组件配置）放入数组，建议直接引用nodes中的节点对象，避免匹配问题。

模板驱动表单示例 #

修改后的模板：

<p-treeSelect
  selectionMode="checkbox"
  [options]="nodes"
  [(ngModel)]="selectedNodes"
  (onNodeSelect)="onSelectedChange($event)"
  placeholder="Select"
></p-treeSelect>

组件类中初始化选中数组：

// 示例节点数据结构
nodes = [
  {
    label: '父节点1',
    value: 'parent1',
    children: [
      { label: '子节点1-1', value: 'child11' },
      { label: '子节点1-2', value: 'child12' }
    ]
  },
  {
    label: '父节点2',
    value: 'parent2'
  }
];

// 默认选中父节点1和子节点1-1
selectedNodes = [this.nodes[0], this.nodes[0].children[0]];

响应式表单示例 #

修改后的模板：

<p-treeSelect
  selectionMode="checkbox"
  [options]="nodes"
  [formControl]="treeSelectControl"
  (onNodeSelect)="onSelectedChange($event)"
  placeholder="Select"
></p-treeSelect>

组件类中设置初始值：

import { FormControl } from '@angular/forms';

// 节点数据同上方示例
nodes = [...];

treeSelectControl = new FormControl();

ngOnInit() {
  // 组件初始化时设置默认选中节点
  this.treeSelectControl.setValue([this.nodes[0], this.nodes[0].children[0]]);
}

注意事项 #

如果节点数据是异步加载的（比如从接口获取），要确保数据加载完成后再设置选中数组或表单控件的值，否则会因节点未初始化导致选中状态不生效。

内容的提问来源于stack exchange，提问作者Meenal Gupta