带有复选框选择的PrimeNG Tree v16：如何实现编程单选？

Question

我正在 Angular 中使用 PrimeNG Tree 组件，特别是将选择模式设置为“复选框”。我想实现程序化的单一选择。

换句话说，我想确保选择一个子节点会自动取消选择除与所选子节点直接关联的节点之外的所有其他子节点和父节点。

我的 Angular 组件中有以下代码，我试图在选择新节点之前取消选择所有节点。但它没有按预期工作。先前选择的父节点保持选中状态。

export class TreeCheckboxDemo implements OnInit {
  files!: TreeNode[];
  selectedFiles!: TreeNode[];

  constructor(private nodeService: NodeService) {}

  ngOnInit() {
    this.nodeService.getFiles().then((data) => (this.files = data));
  }

  public onNodeSelect(event: any) {
    if (this.selectedFiles.length > 1) {
      this.selectedFiles = null;
    }
    this.selectedFiles = [event.node];
  }
}

我创建了一个 StackBlitz 示例来提供更多上下文。任何帮助或代码示例将不胜感激。谢谢！

Answer 1

这可能对你没有帮助，但你遇到这个问题的原因是因为所有节点都没有共同的父节点，如果你可以定义一个共同的父节点，这个问题就会解决，因为取消选中 if propogated，但由于有没有共同的父节点，发出不会到达所有其他节点！

这是我解决问题的部分尝试，希望对您有所帮助！

堆栈闪电战