使用ngx-filter-pipe angular过滤多个值

Question

我正在使用角度为4的ngx-filter-pipe而且我遇到了这个问题。 我设法过滤了一个值，现在我试图用多个值过滤数据：这是我得到的这是我的组件：

@Component({
  selector: 'deudas-list',
  templateUrl: '../views/deudas-list.html',
  providers: [ DeudaService ]
})
export class DeudasListComponent{
  public titulo: string;
  public  deudas: Deuda[];
  public  userFilter: any = { mes: '' };

  constructor(
      private _route: ActivatedRoute,
      private _router: Router,
      private _productoService: DeudaService
  ) {
    this.titulo = 'Listado de Pagos:';
  }

  ngOnInit() {
    this._productoService.getDeudas().subscribe(
      result =>{
          console.log(result['Cuotas'].Cuota);
          this.deudas = result['Cuotas'].Cuota;
      },
      error => {
        console.log(<any>error);
      }
    );
  }
}

这是我的观点

<div class="form-group has-feedback">
  <label for="term" class="sr-only">Search</label>
  <input type="text" name="term" [(ngModel)]="userFilter.mes" class="form-control" id="term" placeholder="Buscar por mes...">
  <span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
<div *ngIf="deudas" class="table-responsive col-lg-12 tablilla">
  <table class="table table-bordered table-striped table-responsive">
    <tbody>
      <tr *ngFor="let deuda of deudas | filterBy: userFilter | paginate: {itemsPerPage:10,currentPage: p}">
        <td>{{deuda.nombre_edificio}}</td>
        <td>{{deuda.numero_dpto}}</td>
        <td>{{deuda.Annio}}</td>
        <td>{{deuda.mes}}</td>
        <td>{{deuda.nombre_tipo_cuota}}</td>
        <td>{{deuda.monto_cuota}}</td>
        <td>{{deuda.nombre_estado_cuota}}</td>
        <td>{{deuda.fecha_pago}}</td>
      </tr>
    </tbody>
  </table>
  <pagination-controls (pageChange)="p = $event" class="paginador"></pagination-controls>
</div>

我试了很多东西，但我不能让它工作这里是我正在关注的文档https://github.com/VadimDez/ngx-filter-pipe我不能得到$或过滤器工作，如图所示

这是我从ws获得的数据

正如你可以看到我使用mes过滤，但我想使用多个<input type="text" name="term" [(ngModel)]="userFilter.mes" class="form-control" id="term" placeholder="Buscar por mes...">

任何帮助，将不胜感激。

Answer 1

如果您使用相同的数据类型来过滤值，则可以在同一个过滤器中执行此操作但如果您需要不同的结果，则可以使用if else条件或切换条件以获得不同的结果作为您的要求

 import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'CurrencyFilter', pure: false }) export class CurrencyFilterPipe implements PipeTransform { transform(items: number): any { var OrigionalValue = items; var franctionCount = parseInt(abp.session.crNoOfDgtsAftrDecimal); var value = items.toFixed(franctionCount); var commaSaperatedVal = value.replace(/(\\d)(?=(\\d\\d\\d)+(?!\\d))/g, "$1" + abp.session.crDgtGrpSymbol + ""); var selectedSymbol = abp.session.crCurrencySymbol; var selectedSymbol = ""; var PosCurrFormat = abp.session.crPositivCurrencyFrmt; var NgtvCurrFormat = abp.session.crNagativeCurrencyFrmt; var FinalValue; if (items > 0) { switch (PosCurrFormat) { case "$1.1": FinalValue = selectedSymbol + commaSaperatedVal; break; case "1.1$": FinalValue = commaSaperatedVal + selectedSymbol ; break; case "$ 1.1": FinalValue = selectedSymbol+" "+ commaSaperatedVal; break; case "1.1 $": FinalValue = commaSaperatedVal + " " + selectedSymbol; break; } return FinalValue } if (items < 0) { commaSaperatedVal = commaSaperatedVal.replace('-','') switch (NgtvCurrFormat) { case "($1.1)": FinalValue = "("+selectedSymbol + commaSaperatedVal+")"; break; case "-$1.1": FinalValue = "-"+selectedSymbol + commaSaperatedVal; break; case "$-1.1": FinalValue = selectedSymbol + "-"+ commaSaperatedVal; break; case "$1.1-": FinalValue = selectedSymbol + commaSaperatedVal + "-" ; break; case "(1.1$)": FinalValue = "(" + commaSaperatedVal + selectedSymbol + ")"; break; case "-1.1$": FinalValue = "-" + commaSaperatedVal + selectedSymbol; break; case "1.1-$": FinalValue = commaSaperatedVal + "-"+ selectedSymbol ; break; case "1.1$-": FinalValue = commaSaperatedVal+selectedSymbol + "-"; break; case "-1.1 $": FinalValue = "-" + commaSaperatedVal +" "+ selectedSymbol ; break; case "-$ 1.1": FinalValue = "-" + " "+ selectedSymbol + commaSaperatedVal; break; case "1.1 $-": FinalValue = commaSaperatedVal + " " + selectedSymbol + "-"; break; case "$ 1.1-": FinalValue = selectedSymbol + " " + commaSaperatedVal + "-"; break; case "$ -1.1": FinalValue = selectedSymbol + " " + "-" + commaSaperatedVal; break; case "1.1- $": FinalValue = commaSaperatedVal + "-" + " " + selectedSymbol; break; case "($ 1.1)": FinalValue = "(" + selectedSymbol + " " + commaSaperatedVal + ")"; break; case "(1.1 $)": FinalValue = "(" + commaSaperatedVal +" "+ selectedSymbol + ")"; break; } return FinalValue } return FinalValue; } } 

Answer 2

不确定我是否正确地提出了你的问题。

您想要通过多个字段进行过滤吗？ 如果是这样 - 只需设置更多字段来过滤对象

例如，如果您的过滤器对象是userFilter并且您已经有一个输入将值设置为字段mes

<input type="text" name="term" [(ngModel)]="userFilter.mes" class="form-control" id="term" placeholder="Buscar por mes...">

添加另一个设置值的输入，例如按Annio过滤：

<input type="text" name="Annio" [(ngModel)]="userFilter.Annio" class="form-control" placeholder="Annio">

希望这可以帮助

Answer 3

    @Component({
      selector: 'deudas-list',
      templateUrl: '../views/deudas-list.html',
      providers: [ DeudaService ]
    })
    export class DeudasListComponent{
      public titulo: string;
      public  deudas: Deuda[];
      public textFilter:string = ""
      public  userFilter: any = { mes: '' , Annio : '' };

      constructor(
          private _route: ActivatedRoute,
          private _router: Router,
          private _productoService: DeudaService
      ) {
        this.titulo = 'Listado de Pagos:';
      }

       applyNGXFilter(){
           this.userFilter = {
               $or : [ 
                   { 'mes' : this.textFilter} 
               ] , 
               [ 
                   { 'Annio' : this.textFilter } 
               ]
           }
      }

      ngOnInit() {
        this._productoService.getDeudas().subscribe(
          result =>{
              console.log(result['Cuotas'].Cuota);
              this.deudas = result['Cuotas'].Cuota;
          },
          error => {
            console.log(<any>error);
          }
        );
      }
    }

<div class="form-group has-feedback">
  <label for="term" class="sr-only">Search</label>
  <input type="text" name="term" [(ngModel)]="textFilter" (change)="applyNGXFilter()" class="form-control" id="term" placeholder="Buscar por mes...">
  <span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
<div *ngIf="deudas" class="table-responsive col-lg-12 tablilla">
  <table class="table table-bordered table-striped table-responsive">
    <tbody>
      <tr *ngFor="let deuda of deudas | filterBy: userFilter | paginate: {itemsPerPage:10,currentPage: p}">
        <td>{{deuda.nombre_edificio}}</td>
        <td>{{deuda.numero_dpto}}</td>
        <td>{{deuda.Annio}}</td>
        <td>{{deuda.mes}}</td>
        <td>{{deuda.nombre_tipo_cuota}}</td>
        <td>{{deuda.monto_cuota}}</td>
        <td>{{deuda.nombre_estado_cuota}}</td>
        <td>{{deuda.fecha_pago}}</td>
      </tr>
    </tbody>
  </table>
  <pagination-controls (pageChange)="p = $event" class="paginador"></pagination-controls>
</div>