使用自定义headerTemplate时，如何在ngx-treeview搜索结果为空时禁用全选框？

要实现搜索结果为空时禁用全选复选框，由于组件本身不提供搜索结果状态，我们可以自行维护过滤状态，步骤如下：

1. 组件类中维护过滤状态与原始数据 #

在使用ngx-treeview的组件类里，添加变量和自定义逻辑来判断搜索结果是否为空：

import { TreeviewItem, TreeviewConfig } from 'ngx-treeview';

export class YourComponent {
  // 保存原始树结构数据
  originalTreeItems: TreeviewItem[];
  // 标记搜索结果是否为空
  isFilterEmpty = false;
  // 搜索框绑定的过滤文本
  filterText = '';
  // 获取树视图组件实例
  @ViewChild('treeViewComponent') treeViewComponent: TreeviewComponent;

  ngOnInit() {
    // 初始化时保存原始树数据（替换为你的实际数据来源）
    this.originalTreeItems = [...yourTreeData];
  }

  // 自定义过滤文本变化处理方法
  handleFilterTextChange(text: string) {
    this.filterText = text;
    // 调用组件原生的过滤方法
    this.treeViewComponent.onFilterTextChange(text);
    // 自行过滤原始数据，判断是否有匹配项
    this.isFilterEmpty = !this.hasMatchingItems(this.originalTreeItems, text);
  }

  // 递归判断树中是否存在匹配过滤文本的项
  private hasMatchingItems(items: TreeviewItem[], filterText: string): boolean {
    if (!filterText.trim()) {
      // 过滤文本为空时，视为有结果
      return true;
    }
    const lowerFilterText = filterText.toLowerCase();
    for (const item of items) {
      // 检查当前项文本是否匹配
      if (item.text.toLowerCase().includes(lowerFilterText)) {
        return true;
      }
      // 递归检查子项
      if (item.children && this.hasMatchingItems(item.children, filterText)) {
        return true;
      }
    }
    return false;
  }
}

2. 修改模板绑定逻辑 #

调整自定义headerTemplate的绑定，替换过滤方法并给全选复选框添加禁用属性：

<ngx-treeview 
  [items]="yourTreeData"
  [config]="treeViewCategoryConfig"
  [headerTemplate]="headerTemplate"
  #treeViewComponent>
</ngx-treeview>

<ng-template #headerTemplate
             let-item="item"
             let-config="treeViewCategoryConfig"
             let-onCheckedChange="onCheckedChange">
  <div *ngIf="treeViewCategoryConfig.hasFilter">
    <input type="search"
           [(ngModel)]="filterText"
           (ngModelChange)="handleFilterTextChange($event)"
           #filterCategory />
  </div>
  <div>
    <input type="checkbox"
           value=""
           [ngModel]="checked"
           (ngModelChange)="onCheckedChange($event)"
           [id]="checkboxId"
           [disabled]="isFilterEmpty" /> <!-- 绑定禁用状态 -->
    <label class="form-check-label"
           [for]="checkboxId">
        {{label}}
    </label>
  </div>
</ng-template>

逻辑说明 #

• 通过递归遍历原始树数据，判断是否存在匹配搜索文本的项，以此控制全选复选框的禁用状态。
• 当过滤文本为空时，默认保留全选功能；当过滤后无匹配项时，自动禁用全选复选框。

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