Question

下面是数据模型

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: [

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

我需要在管道中编写一个逻辑，以便如果我使用标题名称为child的数据进行搜索，则应该向我显示结果，包括父母和孩子的标题。

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
   }
}

Answer 1

首先，您的数据模型在语法上毫无意义。我想你的意思是这样的：

    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。

这是您要的吗？

最好，菲利普

如何在angular6中使搜索管道可行

1 个答案: