我想使用我的自定义过滤器而不是ngxTreeView中的过滤器

Question

树视图项目按预期显示但我想使用我自己的过滤器而不是ngx-treeview中的过滤器（请参阅下面的链接）。

https://leovo2708.github.io/ngx-treeview/#/advanced

我已经在树视图显示中映射了项目。 我想要的下一件事是将这些treeview项目放入我们的可重用下拉列表中。 在这个可重复使用的下拉列表中，我们有过滤器文本框。

这个下拉列表的行为是什么？

1. 最初打开此下拉列表时，它具有过滤器文本框和一些建议项（不在树视图显示中）。

2. 当我们在过滤器框上键入内容时，将显示树视图，并从父节点到最后一个子节点进行一些智能搜索。 （就像我提供的链接中的行为一样）

3. 当我删除我在过滤器框中输入的单词时，它将再次显示初始建议项目（来自编号1）。

4. 此外，当在此树视图中单击插入符号时，它将执行API调用，其中它将返回子节点的数据。

5. 即使它没有子节点，我也很难显示插入符号。 因为在我们的应用程序中，如果单击插入符号，它将只有子节点（Do API调用）

我正在考虑使用ngx treeview中的过滤器，但我很难复制我提到的行为（从1到5）并将其放到我们的可重用下拉列表中

在html`

  <ng-template #defaultHeaderTemplate let-config="config" let-item="item" let-onCollapseExpand="onCollapseExpand"  let-onCheckedChange="onCheckedChange" let-onFilterTextChange="onFilterTextChange">       
      <div *ngIf="config.hasFilter" class="row row-filter">       
        <div class="col-12">           
          <input class="form-control" type="text" [placeholder]="i18n.getFilterPlaceholder()" [(ngModel)]="filterText"   (ngModelChange)="onFilterTextChange($event)" />         
         </div>      
      </div>        

      <div *ngIf="hasFilterItems">         
        <div *ngIf="config.hasAllCheckBox || config.hasCollapseExpand" class="row row-all">          
          <div class="col-12">              <div class="form-check form-check-inline" *ngIf="config.hasAllCheckBox">            
            <input type="checkbox" class="form-check-input" [(ngModel)]="item.checked" (ngModelChange)="onCheckedChange()"   [indeterminate]="item.indeterminate" />              
            <label class="form-check-label" (click)="item.checked = !item.checked; onCheckedChange()">               
            {{i18n.getAllCheckboxText()}}             
            </label>             
          </div>             
            <label *ngIf="config.hasCollapseExpand" class="pull-right form-check-label" (click)="onCollapseExpand()">              
                <i [title]="i18n.getTooltipCollapseExpandText(item.collapsed)" aria-hidden="true" class="fa"   [class.fa-expand]="item.collapsed" [class.fa-compress]="! item.collapsed"></i>          
           </label>           
          </div>                            
      </div>      

      <div *ngIf="config.hasDivider" class="dropdown-divider"></div>   
      </div>  
    </ng-template>`

可重复使用的下拉菜单

  <button              
    id="dropdown-button"
    dropdownToggle
    type="button"
    class="btn btn-primary dropdown-toggle text-left dropdown-button-fe" >
    {{dropdownLabel.value}}<span class="caret float-right"></span>
  </button>
  <div class="menu">
    <ul *dropdownMenu class="dropdown-menu" role="menu">
      <li role="menuitem">


        <input           
          #searchInput
          type="text"
          class="form-control"
          placeholder="search.." 
          (keyup) = "treeViewFilter($event)"
          />

      </li>   
      <li class="dropdown-item disabled list-box-title-fe" aria-disabled="true">suggested items</li>

      <div *ngIf="isFullHierarchy">
      <li>

          <ng-template #itemTemplate let-item="item" let-onCollapseExpand="onCollapseExpand" let-onCheckedChange="onCheckedChange">
              <div class="form-inline row-item">
                <i *ngIf="item.children" (click)="onCollapseExpand()" aria-hidden="true" class="fa" [class.fa-caret-right]="item.collapsed"
                  [class.fa-caret-down]="!item.collapsed"></i>
                <div class="form-check">
                  <input type="checkbox" class="form-check-input" [(ngModel)]="item.checked" (ngModelChange)="onCheckedChange()" [disabled]="item.disabled"
                    [indeterminate]="item.indeterminate" />
                  <label class="form-check-label" (click)="item.checked = !item.checked; onCheckedChange()">
                    {{item.text}}
                  </label>
                 </div>
              </div>
            </ng-template>
      </li>
    </div>


      <hr class="divider-browse-fe" />
      <li class="dropdown-item disabled">
        <input type="button" class="btn btn-link link-browse-fe" value="Display the Tree view"></li>
    </ul>
  </div>
</div>

预期结果：

1. 树视图项目显示在下拉列表中（已完成）

2.1最初显示过滤器文本（来自链接），在其下面是建议项目。 当我们开始在过滤器中键入单词时，会出现树视图

2.2或使用自定义过滤器，但行为就像链接中的过滤器一样（我更喜欢但很难实现它）

3. 当过滤器为空时，存在的项目是建议的项目。

很难实现它

4. 即使没有显示子节点，也会出现插入符号。

5. 如果单击插入符号，将显示子节点

实际结果：

1. 树视图与可重用组件分开

2. 当我使用可重用的过滤器时，它不会在树视图中搜索