【问题标题】:Why one of my filter pipe is not showing up the results?为什么我的一个过滤管没有显示结果?
【发布时间】:2021-01-11 14:00:46
【问题描述】:

我为 DL 添加了另一个过滤器。但是我的 DL 过滤器没有显示结果。您能否建议我需要进行哪些更改?

<div class="form-group float-left mr-4">
<strong>DL</strong>
<br />
<select class="form-control form-control-sm" name="dl" ngModel [ngModelOptions]="{updateOn: 'submit'}">
<option></option>
<option value="CAT1">CAT1</option>
<option value="CAT2">CAT2</option>
</select>
</div>

table-filter.pipe.ts

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

@Pipe({
  name: "tableFilter"
})

export class TableFilterPipe implements PipeTransform {
  transform(list: any[], filters: any) {
    const keys = Object.keys(filters).filter(key => filters[key]);
    const filterUser = (user: { [x: string]: any; }) =>
      keys.every(key => {
        if (key == "sdob") {
          return new Date(user["dob"]) >= new Date(new Date(filters[key]).setHours(0,0,0,0));
        } else if (key == "edob") {
              return new Date(new Date(filters[key]).setHours(0,0,0,0)) >= new Date(user["dob"]);
        } else {
          return user[key] === filters[key];
        }
      });
    return keys.length ? list.filter(filterUser) : list;
  }
}

网址:https://stackblitz.com/edit/angular-ivy-dubf37?file=src%2Fapp%2Fapp.component.html

【问题讨论】:

    标签: angular typescript filter pipe


    【解决方案1】:

    在您的过滤器中再添加一个else if

    else if (
          key === "dl" &&
          user["assigned_to"].filter(e => e.dl === filters[key]).length
        ) {
          return user;
        } 
    

    https://angular-ivy-ehrh4h.stackblitz.io

    【讨论】:

    • 您是否还进行了其他更改,因为当我将代码移动到本地时它不起作用? :(
    • 不,没有做任何其他事情,你能过滤 stackblitz 本身吗?
    • 我可以。无论如何,你能帮我解决这个问题吗? stackoverflow.com/questions/65679357/…
    • 是不是因为我的数据来自使用 httpclient 而不是服务的 api?
    • 应该没问题,可以随时调试。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-06-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-10-25
    • 2012-07-03
    • 2021-06-21
    相关资源
    最近更新 更多