Question

我已经在Angular JS中创建了DataTable。它工作正常，但现在我正在使用角度管道实现搜索过滤器。对于这种情况，我创建了以下代码

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `<input [(model)]="query" type="text" />
  <ul>
        <li *ngFor="let item of mf.data | search:query" >{{item.name}}</li>
  </ul>`,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent   {

   private obj: any =[
    { name: "Sinta", email: "sinta@gmail.com", age: "50" },
    { name: "Jojo", email: "Jojo@gmail.com", age: "15" },
    { name: "Andre", email: "Andre@gmail.com", age: "85" } ];

private userlist: any[]=[];

constructor() {
    this.userlist=this.obj;
 }
}

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { DataTableModule } from "angular2-datatable";
import { Pipe, PipeTransform, Injectable } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DataTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
@Pipe({
    name: 'search',
    pure: false
})
@Injectable()
export class search implements PipeTransform {
     transform(item:any[], args:any):any[] {
        var isSearch = (data:any): bool => {
            var isAll = false;
            if(typeof data === 'object' ){
                for (var z in data) {
                    if(isAll = isSearch(data[z]) ){
                        break;
                    }
                }
            } else {
                if(typeof args === 'number'){
                    isAll = data === args;
                } else {
                    isAll = data.toString().match( new RegExp(args, 'i') );
                }
            } 

            return isAll;
        };

        return item.filter(isSearch);
    }
}

但是它不能满足我的需求，请问有人可以帮助您构建过滤器管道

Answer 1

HTML文件

<label>Search</label>
<input type="text" [(ngModel)]="searchTxt" name="searchTxt" placeholder="search name">

<div class="col-md-6">
  <table class="table table-striped" [mfData]="userlist | search:searchTxt" #mf="mfDataTable" [mfRowsOnPage]="5">
    <thead>
      <tr>
        <th style="width: 20%">
          <mfDefaultSorter by="name">Name</mfDefaultSorter>
        </th>
        <th style="width: 10%">
          <mfDefaultSorter by="email">Email</mfDefaultSorter>
        </th>
        <th style="width: 10%">
          <mfDefaultSorter by="age">Age</mfDefaultSorter>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of mf.data">
        <ng-container *ngIf="item == -1">
          <td colspan="3" align="center">No Data Found</td>
        </ng-container>
        <ng-container *ngIf="item!=-1">
          <td>{{item.name}}</td>
          <td>{{item.email}}</td>
          <td class="text-right">{{item.age}}</td>
        </ng-container>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4">
          <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

打字稿文件

public searchTxt:any;
public obj: any =[
    { name: "Sinta", email: "sinta@gmail.com", age: "50" },
    { name: "Jojo", email: "Jojo@gmail.com", age: "15" },
    { name: "Andre", email: "Andre@gmail.com", age: "85" },
    { name: "Simpson", email: "Simpson@gmail.com", age: "45" },
    { name: "Doly", email: "Doly@gmail.com", age: "40" },
    { name: "Bintang", email: "Bintang@gmail.com", age: "36" },
    { name: "Aria", email: "Aria@gmail.com", age: "74" },
    { name: "Sams", email: "Sams@gmail.com", age: "8" },
    { name: "Oly", email: "Oly@gmail.com", age: "12" }
  ];

  userlist: any[]=[];
constructor() {   
    this.userlist=this.obj;
}

SearchPipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'search'
})

export class SearchPipe implements PipeTransform {
    private searchKeyword: string = "";
    private Result = [];

    constructor() {

    }

    transform(items: any[], searchText: string): any[] {
        if (this.isObjNull(items)) return [-1];
        if (this.isObjNull(searchText)) return items;
        this.searchKeyword = searchText.toLowerCase();
        this.Result = items.filter(o => this.checkAgainstProperty(o.name));
        if (this.Result.length === 0) {
            return [-1];
        }
        return this.Result;
    }

    private checkAgainstProperty(property: any): boolean {
        let value: boolean = false;

        if (!this.isNullOrWhiteSpace(property)) {
            if (property.toLowerCase().indexOf(this.searchKeyword.toLowerCase()) >= 0) {
                value = true;
            }
        }

        return value;
    }

    public isObjNull(obj: any, isNumber = false): boolean {
        let value: boolean = true;

        if (!isNumber && obj && obj != undefined && obj != null)
            value = false;
        else if (isNumber && obj != undefined && obj != null)
            value = false;

        return value;
    }

    public isNullOrWhiteSpace(obj: string): boolean {
        let value: boolean = true;

        if (!this.isObjNull(obj) && obj.trim() != "")
            value = false;

        return value;
    }
}

app.module.ts

import { SearchPipe } from './search.pipe'


 declarations: [
    SearchPipe
 ]

这是没有数据的完美解决方案。截图

Answer 2

您需要使用 ngModel 而不是 model

 template: `<input [(ngModel)]="query" type="text" />

角度搜索过滤器在数据表中不起作用

2 个答案: