Question

我无法使用管道过滤器过滤嵌套的* ngFor数据。当我在搜索框中放入内容时，它仅过滤父* ngFor数据。不过滤嵌套的内容。

下面是我的component.html代码：

<div class="tree">
  <ul>
    <li class="p" *ngFor="let p of tree | treeFilter: { Partner:searchText, Customer:searchText,s:searchText}">

      <ng-container *ngIf="p.Partner=='__DIRECT__'; then direct else normal"></ng-container>
      <ng-template #direct>
        <a class="direct" routerLink="/myapp/partner/{{p.Partner}}">Direct Customers</a><span class="count-p">{{p['Customers']?.length }}</span>
      </ng-template>
      <ng-template #normal>
        <a routerLink="/myapp/partner/{{p.Partner}}">{{p.Partner}}</a><span class="count-p">{{p['Customers']?.length }}</span>
      </ng-template>
      <ul>
        <li class="c" *ngFor="let c of p['Customers']">
          <a routerLink="/myapp/customer/{{c.Customer}}">{{c.Customer}}</a><span class="count-s">{{c['Solutions']?.length }}</span>
          <ul>
            <li class="s" *ngFor="let s of c['Solutions']">
              <a routerLink="/myapp/solution/{{s}}">{{s}}</a>
            </li>
            <li>
              <a routerLink="/myapp/numbers/{{c.Customer}}">Number Management</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

这是搜索过滤器代码：

import { Pipe, PipeTransform, Injectable } from '@angular/core';

@Pipe({
  name: 'treeFilter'
})
@Injectable()
export class SearchPipe implements PipeTransform {

  transform(items: any, filter: any, defaultFilter: boolean): any {
    if (!filter) {
      return items;
    }

    if (!Array.isArray(items)) {
      return items;
    }

    if (filter && Array.isArray(items)) {
      const filterKeys = Object.keys(filter);

      if (defaultFilter) {
        return items.filter(item =>
          filterKeys.reduce((x, keyName) =>
            (x && new RegExp(filter[keyName], 'gi').test(item[keyName])) || filter[keyName] === '', true));
      } else {
        return items.filter(item => {
          return filterKeys.some((keyName) => {
            return new RegExp(filter[keyName], 'gi').test(item[keyName]) || filter[keyName] === '';
          });
        });
      }
    }
  }
}

以下是我从API获取的数据：

[ { “合作伙伴”：“大卖家”， '顾客'：[ { '客户'：'Eazio'， “解决方案”：[ '1AB0011-1SIP'， '1AB0021-1SIP'， '1AB0031-1SIP'， '1AB0041-1SIP'， '1AB0051-1SIP'， '1AB0061-1SIP'， '1AB0071-1SIP'， '1AB0081-1SIP'， '1AB0091-1SIP' ] }， { '客户'：'Ecodo'， “解决方案”：[ '1AB3011-1SIP' ] }， { '客户'：'Epidel'， “解决方案”：[ '1AB2011-1SIP'， '1AB2021-1SIP' ] }， { '客户'：'Inose'， “解决方案”：[ '1AB4011-1SIP'， '1AB4021-1SIP'， '1AB4031-1SIP'， '1AB4041-1SIP'， '1AB4051-1SIP'， '1AB4061-1SIP'， '1AB4071-1SIP'， '1AB4081-1SIP'， '1AB4091-1SIP'， '1AB4101-1SIP' ] }， { '客户'：'Kazu'， “解决方案”：[ '1AB1011-1SIP' ] }， { '客户'：'Kwilium'， “解决方案”：[ '1AA5011-1SIP'， '1AA5021-1SIP'， '1AA5031-1SIP'， '1AA5041-1SIP'， '1AA5051-1SIP'， '1AA5061-1SIP'， '1AA5071-1SIP'， '1AA5081-1SIP'， '1AA5091-1SIP'， '1AA5101-1SIP'， '1AA5111-1SIP'， '1AA5121-1SIP'， '1AA5131-1SIP'， '1AA5141-1SIP'， '1AA5151-1SIP' ] }， { '客户'：'Paner'， “解决方案”：[ '1AA8011-1SIP'， '1AA8021-1SIP'， '1AA8031-1SIP'， '1AA8041-1SIP'， '1AA8051-1SIP'， '1AA8061-1SIP'， '1AA8071-1SIP'， '1AA8081-1SIP'， '1AA8091-1SIP'， '1AA8101-1SIP'， '1AA8111-1SIP' ] }， { '客户'：'Perose'， “解决方案”：[ '1AA7011-1SIP'， '1AA7021-1SIP' ] }， { '客户'：'魁北克'， “解决方案”：[ '1AA6011-1SIP'， '1AA6021-1SIP'， '1AA6031-1SIP' ] } ] }， { '合作伙伴'：'Neolium'， '顾客'：[ { '客户'：'激活'， “解决方案”：[ '1AC0011-1SIP'， '1AC0021-1SIP'， '1AC0031-1SIP' ] }， { '客户'：'Lunor'， “解决方案”：[ '1AC1011-1SIP'， '1AC1021-1SIP'， '1AC1031-1SIP'， '1AC1041-1SIP'， '1AC1051-1SIP'， '1AC1061-1SIP'， '1AC1071-1SIP'， '1AC1081-1SIP'， '1AC1091-1SIP'， '1AC1101-1SIP'， '1AC1111-1SIP'， '1AC1121-1SIP'， '1AC1131-1SIP'， '1AC1141-1SIP'， '1AC1151-1SIP'， '1AC1161-1SIP'， '1AC1171-1SIP'， '1AC1181-1SIP'， '1AC1191-1SIP'， '1AC1201-1SIP' ] } ] }， { '合作伙伴'：'好家伙'， '顾客'：[ { '客户'：'Abacy'， “解决方案”：[ '1AA2011-1SIP'， '1AA2021-1SIP'， '1AA2031-1SIP'， '1AA2041-1SIP'， '1AA2051-1SIP'， '1AA2061-1SIP'， '1AA2071-1SIP'， '1AA2081-1SIP' ] }， { '客户'：'Multidoo'， “解决方案”：[ '1AA3011-1SIP'， '1AA3021-1SIP'， '1AA3031-1SIP'， '1AA3041-1SIP'， '1AA3051-1SIP'， '1AA3061-1SIP'， '1AA3071-1SIP' ] }， { '客户'：'Uberescent'， “解决方案”：[ '1AA4011-1SIP'， '1AA4021-1SIP'， '1AA4031-1SIP'， '1AA4041-1SIP'， '1AA4051-1SIP'， '1AA4061-1SIP'， '1AA4071-1SIP'， '1AA4081-1SIP'， '1AA4091-1SIP'， '1AA4101-1SIP' ] } ] }， { “合作伙伴”：“约克郡卖家”， '顾客'：[ { 'Customer'：'Antimba'， “解决方案”：[ '1AB9011-1SIP'， '1AB9021-1SIP'， '1AB9031-1SIP' ] }， { '客户'：'Eivee'， “解决方案”：[ '1AB7011-1SIP'， '1AB7021-1SIP' ] }， { 'Customer'：'Paleofic'， “解决方案”：[ '1AB5011-1SIP' ] }， { '客户'：'Sysil'， “解决方案”：[ '1AB8011-1SIP'， '1AB8021-1SIP'， '1AB8031-1SIP'， '1AB8041-1SIP'， '1AB8051-1SIP'， '1AB8061-1SIP' ] } ] }， { '合作伙伴'：'直接'， '顾客'：[ { '客户'：'Demizu'， “解决方案”：[ '1AC4011-1SIP'， '1AC4021-1SIP'， '1AC4031-1SIP'， '1AC4041-1SIP'， '1AC4051-1SIP'， '1AC4061-1SIP'， '1AC4071-1SIP'， '1AC4081-1SIP'， '1AC4091-1SIP'， '1AC4101-1SIP'， '1AC4111-1SIP'， '1AC4121-1SIP'， '1AC4131-1SIP'， '1AC4141-1SIP' ] }， { '客户'：'Demoveo'， “解决方案”：[ '1AC6011-1SIP' ] }， { 'Customer'：'Plafic'， “解决方案”：[ '1AC5011-1SIP'， '1AC5021-1SIP' ] }， { 'Customer'：'Premist'， “解决方案”：[ '1AC2011-1SIP'， '1AC2021-1SIP'， '1AC2031-1SIP'， '1AC2041-1SIP'， '1AC2051-1SIP'， '1AC2061-1SIP'， '1AC2071-1SIP'， '1AC2081-1SIP'， '1AC2091-1SIP' ] } ] } ]

预先感谢！

Angular 5搜索管道过滤器

0 个答案: