使用 *ngIf 在 clarity 递归树中过滤树节点

19 浏览
0 Comments

使用 *ngIf 在 clarity 递归树中过滤树节点

我有一棵递归的清晰树


  
      {{type.name}}

但我想过滤掉一些树节点。在简单的情况下，我会使用*ngIf指令。但是在这里，我已经有另一个指令*clrRecursiveFor。

所以我尝试将它包装在ng-container中。


     
      
          ...

你可以在app.component.html中看到一些示例here

但在这种情况下，即使isVisible始终返回true，也不会显示任何内容。我该如何在这里使用*ngIf指令来过滤树节点？

0

1 答案

0 Comments

使用 *ngIf 在 Clarity 递归树中过滤树节点的问题出现的原因是当前的解决方案无法实现，更好的解决方法是在组件中过滤数组。

在 Clarity 的递归树中，我们可能需要根据特定条件来过滤树节点。然而，当前的解决方案不支持直接在模板中使用 *ngIf 来过滤树节点。这就导致了问题的出现。

为了解决这个问题，我们可以选择在组件中过滤数组。通过在组件中使用过滤函数，我们可以根据特定条件来过滤树节点，并将过滤后的结果传递给模板进行显示。

下面是一个示例代码，展示了如何在组件中过滤数组并使用 *ngFor 在模板中显示过滤后的树节点：

@Component({
  // 组件配置
})
export class TreeComponent {
  treeData: TreeNode[]; // 树节点数据
  filteredTreeData: TreeNode[]; // 过滤后的树节点数据
  constructor() {
    // 初始化树节点数据
    this.treeData = [
      // 树节点数据结构
    ];
    // 过滤树节点数据
    this.filteredTreeData = this.filterTreeData(); // 调用过滤函数
  }
  // 过滤函数
  filterTreeData(): TreeNode[] {
    // 根据特定条件过滤树节点数据
    // 返回过滤后的树节点数据
  }
}

在模板中，我们可以使用 *ngFor 来遍历过滤后的树节点数据，并显示它们：

通过在组件中过滤数组并使用 *ngFor 在模板中进行遍历和显示，我们可以解决使用 *ngIf 在 Clarity 递归树中过滤树节点的问题。这种方法可以更灵活地控制树节点的显示，以满足我们的需求。

0