Как сделать так, чтобы поисковая труба работала в angular6 - PullRequest
Новая
       38

Как сделать так, чтобы поисковая труба работала в angular6

0 голосов
/ 23 октября 2018

Ниже - Модель данных 

items1 = [

    title: 'Abc',
    items_containers : [

             title: 'edf',
             items_containers: [

                  title: 'pqr',
                  items_container: [

                     ............
                  ]
               ]
            ]
        ]

items2 = [

    title: 'xyz',
    items_containers : [

             title: 'mno',
             items_containers: [

                  title: 'uvw'
                  items_container: [

                     ............
                  ]
               ]
            ]
        ]

Мне нужно написать логику в канале, чтобы при поиске данных с дочерним именем заголовка показывались результатывключая название родителей и детей.

search-pipe.ts 

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

@Pipe({
  name: 'search'
})

export class Searchfunctionality implements PipeTransform {

   transform(items: any, filter: any, defaultFilter: boolean) : any {

        // logic here
   }
}

1 Ответ

0 голосов
/ 23 октября 2018

Прежде всего, ваша Модель данных не имеет синтаксического смысла.Я полагаю, вы имеете в виду что-то вроде этого: 

    items: any = [{
    title: 'Abc',
    items_containers : [{
             title: 'edf',
             items_containers: [{
                  title: 'pqr',
                  items_containers: [
                  ]
             }]
    }]
  }, {
    title: 'TTT',
    items_containers : [{
             title: 'edf',
             items_containers: [{
                  title: 'pqr',
                  items_containers: [
                  ]
             }]
    }]
  }];

Вы можете легко отфильтровать свои элементы, чтобы найти все элементы, содержащие строку поиска, например: 

 @Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(items: any[], searchText: string): any[] {
    if(!items) return [];

    if(!searchText) return items;

    return this.searchItems(items, searchText.toLowerCase());
   }

   private searchItems(items :any[], searchText): any[] {
     let results = [];
      items.forEach(it => {
        if (it.title.toLowerCase().includes(searchText)) {
            results.push(it);
        } else {
          let searchResults =  this.searchItems(it.items_containers, searchText);
          if (searchResults.length > 0) {
              results.push({
                title: it.title,
                items_containers: searchResults
              });
          }
        }
      });
      return results;
   }
}

См. Соответствующий fiddle для получения дополнительной информации.

Это то, что вы просили?

Best, Philipp

...