Question

我有一个带有搜索功能的动态导航栏

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对象的名称属性

Answer 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是包含与过滤器匹配的项目的数组。

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

More info

在Array Angular 2上搜索过滤器

2 个答案: