单列搜索文本输入角度

问题描述

我正在寻找数据表上的单个列搜索， 已经使用了使用管道的常见搜索栏，现在我必须 为每个列实现适当的搜索功能，即搜索 按ID，按名称搜索，按年龄搜索等等。这将是非常 如果有人可以帮助我，这将很有帮助。

app.html

<router-outlet></router-outlet>
        <div>
            <h1>nested Array Table</h1>
            <div class="md-form">
                <input type="text" [(ngModel)]="searchText" class="form-control" id="search" placeholder="Search" />
            </div>
        
            <table class="table table-bordered">
                <thead>
                    
                    <tr>
                        <th>#ID</th>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Weight</th>
                        <th>Height</th>
                        <th>Mobile</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th><input type="text" id="search id" placeholder="Search by ID" /></th>
                        <th><input type="text" id="search name" placeholder="Search by Name" /></th>
                        <th><input type="text" id="search age" placeholder="Search by Age" /></th>
                        <th><input type="text" id="search weight" placeholder="Search by Weight" /></th>
                        <th><input type="text" id="search height" placeholder="Search by Height" /></th>
                        <th><input type="text" id="search mobile" placeholder="Search by Mobile" /></th>
                    </tr>
                </tfoot>
                <tbody>
                    <tr
                        *ngFor="let item of ItemsArray| FilterPipe: 
                        {name: searchText,age:searchText,weight: searchText,height:searchText,mobile: searchText}; let i=index;">
                        <td>{{ i+1 }}</td>
                        <td>{{ item.name }}</td>
                        <th>{{ item.data.age }}</th>
                        <td>{{ item.data.weight }}</td>
                        <td>{{ item.data.height}}</td>
                        <td>{{ item.data.mobile }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

app.ts

    import { Component } from '@angular/core';

@Component({
    selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'testJobnestedArray';
    searchableList: any;
    public searchText : string;
    public ItemsArray : any;

    constructor() { }

    ngOnInit() {

        this.ItemsArray = [
            {
                name: 'manpreet',data:{
                        age: 25,weight: 65,height: 5.6,mobile: [9780698969,6895741258]
                    }   
            },{
                name: 'abdul',data: {
                        age: 26,weight: 80,height: 6.0,mobile: [3698541258]
                    }
            },{
                name: 'onkar',data: {
                        age: 28,weight: 70,height: 5.8,mobile: [8569741236,6528965478]
                    }
            }
        ]
        // this.searchableList = ['name','age','weight','height','mobile']
        console.log('this.ItemsArray',this.ItemsArray)
    }
}

pipe.ts

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

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


    transform(items: any,filter: any,defaultFilter: boolean): any {
        if (!filter || !Array.isArray(items)) {
            return items;
        }

        if (filter && Array.isArray(items)) {
            let filterKeys = Object.keys(filter);

            if (defaultFilter) {
                return items.filter(item =>
                    filterKeys.reduce((x,keyName) =>
                        (x && new RegExp(filter[keyName],'gi').test(item[keyName])) || filter[keyName] == "",true));
            }
            else {
                return items.filter(item => {
                    return filterKeys.some((keyName) => {
                        console.log(filter[keyName])
                        return new RegExp(filter[keyName],'gi').test(item[keyName]) || 
                        new RegExp(filter[keyName],'gi').test(item.data[keyName]) ||
                        filter[keyName] == "";
                    });
                });
            }
        }
    }
}

解决方法

最佳做法是使用对象制作过滤器，您可以将该对象传递给pipe调用，然后在其中进行过滤。

在您的app.ts中：

export class AppComponent {
    filterObject: {fullSearch: string,id: number,name: string,age: number,weight: number,height: number,mobile: string} = {
        fullSearch: null,id: null,name: null,age: null,weight: null,height: null,mobile: null
    }

在您的app.html中：

  <div class="md-form">
      <input type="text" [(ngModel)]="filterObject.fullSearch" class="form-control" placeholder="Search" />
  </div>
<tfoot>
    <tr>
        <th><input type="text" [(ngModel)]="filterObject.id"  placeholder="Search by ID" /></th>
        <th><input type="text" [(ngModel)]="filterObject.name" placeholder="Search by Name" /></th>
        <th><input type="text" [(ngModel)]="filterObject.age" placeholder="Search by Age" /></th>
        <th><input type="text" [(ngModel)]="filterObject.weight" placeholder="Search by Weight" /></th>
        <th><input type="text" [(ngModel)]="filterObject.height" placeholder="Search by Height" /></th>
        <th><input type="text" [(ngModel)]="filterObject.mobile" placeholder="Search by Mobile" /></th>
    </tr>
</tfoot>
<tbody>
<tr
    *ngFor="let item of ItemsArray| FilterPipe: filterObject; let i=index;">
    <td>{{ i+1 }}</td>
    <td>{{ item.name }}</td>
    <th>{{ item.data.age }}</th>
    <td>{{ item.data.weight }}</td>
    <td>{{ item.data.height}}</td>
    <td>{{ item.data.mobile }}</td>
</tr>

,

我认为值得尝试Ag网格，它具有许多功能，例如列过滤器和良好的性能，您也可以对其进行自定义。Ag Grid