Угловой 5 Фильтр поисковой трубы - PullRequest
0 голосов
/ 29 января 2019

Я не могу отфильтровать вложенные данные * ngFor с помощью конвейерного фильтра.Когда я помещаю что-то в поле поиска, оно фильтрует только данные Parent * 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:

[{'Partner': 'Крупный продавец', 'Customers': [{'Customer': 'Eazio', 'Solutions': ['1AB0011-1SIP', '1AB0021-1SIP', '1AB0031-1SIP', '1AB0041-1SIP', '1AB0051-1SIP', '1AB0061-1SIP', '1AB0071-1SIP', '1AB0081-1SIP', '1AB0091-1SIP']}, {'Customer':'Ecodo', 'Solutions': ['1AB3011-1SIP']}, {'Customer': 'Epidel', 'Solutions': ['1AB2011-1SIP', '1AB2021-1SIP']}, {'Customer':'Inose', 'Solutions': ['1AB4011-1SIP', '1AB4021-1SIP', '1AB4031-1SIP', '1AB4041-1SIP', '1AB4051-1SIP', '1AB4061-1SIP', '1AB4071-1SIP', '1AB4081-1SIP', '1AB4091-1SIP', '1AB4101-1SIP']}, {'Customer': 'Kazu', 'Solutions': ['1AB1011-1SIP']}, {'Customer': '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']}, {'Customer': 'Paner', 'Solutions': ['1AA8011-1SIP',' 1AA8021-1SIP ',' 1AA8031-1SIP ',' 1AA8041-1SIP ',' 1AA8051-1SIP ',' 1AA8061-1SIP ',' 1AA8071-1SIP ',' 1AA8081-1SIP ',' 1AA8091-1SIP ','1AA8101-1SIP', '1AA8111-1SIP']}, {'Customer': 'Perose', 'Solutions': ['1AA7011-1SIP', '1AA7021-1SIP']}, {'Customer': 'Quafy', 'Решения': ['1AA6011-1SIP', '1AA6021-1SIP', '1AA6031-1SIP']}]}, {'Partner': 'Neolium', 'Customers': [{'Customer': 'Enive', 'Решения': ['1AC0011-1SIP', '1AC0021-1SIP', '1AC0031-1SIP']}, {'Customer': 'Lunor', 'Solutions': ['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 ']}]}, {' Partner ':' Nice Guy ',' Customers ': [{«Заказчик»: «Abacy», «Решения»: [«1AA2011-1SIP», «1AA2021-1SIP», «1AA2031-1SIP», «1AA2041-1SIP», «1AA2051-1SIP», «1AA2061-1SIP», «1AA2071-1SIP ',' 1AA2081-1SIP ']}, {' Customer ':' Multidoo ',' Solutions ': [' 1AA3011-1SIP ',' 1AA3021-1SIP ',' 1AA3031-1SIP ',' 1AA3041-1SIP ', '1AA3051-1SIP', '1AA3061-1SIP', '1AA3071-1SIP']}, {'Customer': 'Uberescent', 'Solutions': ['1AA4011-1SIP', '1AA4021-1SIP', '1AA4031-1SIP ',' 1AA4041-1SIP ',' 1AA4051-1SIP ',' 1AA4061-1SIP ',' 1AA4071-1SIP ',' 1AA4081-1SIP ',' 1AA4091-1SIP ',' 1AA4101-1SIP ']}]}, {«Партнер»: «Йоркширский продавец», «Клиенты»: [{«Клиент»: «Antimba», «Решения»: ['1AB9011-1SIP', '1AB9021-1SIP', '1AB9031-1SIP']}, {'Заказчик ':' Eivee ',' Решения ': [' 1AB7011-1SIP ',' 1AB7021-1SIP ']}, {' Заказчик ':' Paleofic ',' Solutions ': [' 1AB5011-1SIP ']}, {'Заказчик ':' Sysil ',' Solutions ': [' 1AB8011-1SIP ',' 1AB8021-1SIP ',' 1AB8031-1SIP ',' 1AB8041-1SIP ',' 1AB8051-1SIP ',' 1AB8061-1SIP ']}]}, {'Partner': ' DIRECT ', 'Customers': [{'Customer': 'Demizu ',' Solutions ': [' 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']}, {'Customer': 'Demoveo ',' Solutions ': [' 1AC6011-1SIP ']}, {' Customer ':' Plafic ',' Solutions ': [' 1AC5011-1SIP ',' 1AC5021-1SIP ']}, {' Customer ':'Premist ',' Solutions ': [' 1AC2011-1SIP ',' 1AC2021-1SIP ',' 1AC2031-1SIP ',' 1AC2041-1SIP ',' 1AC2051-1SIP ',' 1AC2061-1SIP ',' 1AC2071-1SIP ','1AC2081-1SIP', '1AC2091-1SIP']}]}]

Заранее спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...