Array Angular 2 上的搜索過濾器

Question

我有一個動態導航欄，上面有搜索功能

組件.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>

組件.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;
    }
}