【问题标题】:filtering more than one value with ngx-filter-pipe angular使用 ngx-filter-pipe angular 过滤多个值
【发布时间】:2018-02-27 14:08:00
【问题描述】:

我正在使用角度为 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 进行过滤,但我想使用多个 &lt;input type="text" name="term" [(ngModel)]="userFilter.mes" class="form-control" id="term" placeholder="Buscar por mes..."&gt;

任何帮助将不胜感激。

【问题讨论】:

    标签: javascript angular typescript angularjs-filter


    【解决方案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;
        }
    }

    【讨论】:

    • 感谢您的回答,但我已经有了过滤器,我只需要一些帮助,使其适用于多个值。生病编辑我的帖子以获取更多详细信息。
    【解决方案2】:

    不确定我的问题是否正确。

    您要过滤多个字段吗? 如果是这样 - 只需设置更多字段来过滤对象

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

    &lt;input type="text" name="term" [(ngModel)]="userFilter.mes" class="form-control" id="term" placeholder="Buscar por mes..."&gt;

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

    &lt;input type="text" name="Annio" [(ngModel)]="userFilter.Annio" class="form-control" placeholder="Annio"&gt;

    希望对你有帮助

    【讨论】:

    • 是的,这就是我想要做的,但是我想知道我是否可以在一个输入中使用它
    • 那你要过滤哪些字段?
    • 假设我要过滤“mes”、“Annio”和“numero_dpto”。能做到吗?
    • 我的意思是使用一个输入让管道过滤这三个字段。发送类似 public userFilter: any = { mes: '', Annio: '', numero_dpto:'' };我试图用 $or 来做,但我不确定出了什么问题,或者是否有可能。
    • 我想搜索的不是包含而是开始,有谁知道我可以用 ngx-filter-pipe 做到这一点吗?
    【解决方案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>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-06-17
      • 2016-08-17
      • 1970-01-01
      • 2022-06-22
      • 1970-01-01
      • 2018-05-30
      • 1970-01-01
      • 2011-02-05
      相关资源
      最近更新 更多