Array Angular 2 上的搜索过滤器答案

【问题标题】：Search filter on Array Angular 2Array Angular 2 上的搜索过滤器
【发布时间】：2017-07-28 15:30:56
【问题描述】：

我有一个动态导航栏，上面有搜索功能

Component.html

<input type="text" class="form-control" placeholder="Navigation search..." [(ngModel)]="searchString">
<li class="nav-item " *ngFor="let dir of directories">
    <a href="javascript:;" class="nav-link nav-toggle">
        <i class="fa fa-clock-o"></i>
        <span class="title">{{ dir.name }}</span>
        <span class="arrow"></span>
    </a>
    <ul class="sub-menu" *ngFor="let file of dir.child">
        <li class="nav-item  ">
            <a href="#" class="nav-link ">
                <span class="title">{{file.name}}</span>
            </a>
        </li>
        <navigation-bar [directories]="dir.child"></navigation-bar>
     </ul>
</li>

Component.ts

import { Component, Input } from '@angular/core';
@Component({
    selector: 'navigation-bar',
    templateUrl: './app/home/navigationBar.component.html',    
})

export class NavigationBarComponent {
    @Input() directories: Array<Tree>;      
}

export class Tree{
    directories: any;
    constructor()
    {
        this.directories = [
        {
            name: 'parent1',
            child: [{
                name: 'child1',
                child: []
            },
            {
                name: 'child2',
                child: []
            }]
        },
        {
            name: 'parent2',
            child: {
                name: 'child1',
                child: []
            }
        },
        {
            name: 'parent2',
            child: [{
                name: 'child1',
                child: []
            },
            {
                name: 'child2',
                child: []
            }]
        }];
    }    
}

现在我想使用在文本框中输入的搜索字符串来搜索导航栏。

是否有任何方法可以为文本框中输入的每个字符实现上述功能。它应该过滤 JSON 对象的 name 属性

【问题讨论】：

你可以为它创建一个 plunker，你可以使用 keyup 和在搜索中使用事件发射器轻松实现这一点，但是 plunker 会正确地证明这一点
依赖太多了，我在Asp.net Core中实现了Angular 2
父名还是子名属性？
想同时搜索

标签： angular treeview navbar

【解决方案1】：

在您的输入字段中：

<input (keyup)="applyFilter($event.target.value);">

在您的组件上：

applyFilter(filter: String) {
    this.filteredArray = this.directories.filter(item => {
          if (item.name.toString().toLowerCase().indexOf(filter.toLowerCase()) !== -1) {
            return true;
          }
        return false;
    }
    );
}

filteredArray 是包含与过滤器匹配的项目的数组。

【讨论】：

【解决方案2】：

您可以创建一个自定义管道来执行此操作，优点是您可以传递那些需要搜索的键。您可以根据需要更新以下代码。例如

<li *ngFor="let n of list | FilterPipe: queryString : searchableList ">
      {{n.name}} ({{n.age}})
</li>

 this.searchableList = ['name','age']

管道

@Pipe({
    name: 'FilterPipe',
})
export class FilterPipe implements PipeTransform {
    transform(value: any, input: string,searchableList : any) {
        if (input) {
            input = input.toLowerCase();
            return value.filter(function (el: any) {
                var isTrue = false;
                for(var k in searchableList ){
                  if(el[searchableList[k]].toLowerCase().indexOf(input) > -1){
                    isTrue = true;
                  }
                  if(isTrue){
                    return el
                  }
                }

            })
        }
        return value;
    }
}

【讨论】：