用于从 angular 5 中的两个日期过滤列表的自定义管道

Question

我有一个用于按日期过滤列表的自定义管道，它可以在没有参数的情况下工作

<tr *ngFor="let account of  accounts | customRangeFilter">

@Pipe({
  name: 'customRangeFilter'
})
export class CustomRangeFilterPipe implements PipeTransform {

  transform(value, arg1?:Date, arg2?:any,) {
    if(!arg1 || !arg2){

    return value;

    }else{
      let startDate = new Date(arg1);
      let endDate = new Date(arg2);
      let a = value.filter(
        m => new Date(m.date) >= startDate && new Date(m.date) <= endDate
      )
      return a;
    }

  }
}

我希望它使用 2 个参数来过滤，但是通过放置参数我得到了这个错误

  <tr *ngFor="let account of  accounts | customRangeFilter :'{{startDate}}':'{{endDate}}'">

        Uncaught Error: Template parse errors:
    Can't bind to '*ngFor' since it isn't a known property of 'tr'. ("
      </thead>
      <tbody>
        <tr [ERROR ->]*ngFor="let account of  accounts | customRangeFilter :'{{startDate}}':'{{endDate}}'">

我知道变量 endDate 和 startDate 有效，因为如果我将它们的数据放在 html 中，我会得到它们的数据，有什么问题？

Answer 1

您的问题在于您放置参数的方式。从您的参数中删除表达式括号并将它们设置为：

<tr *ngFor="let account of accounts | customRangeFilter :'startDate':'endDate'">

Answer 2

问题在于您如何将参数传递给自定义管道。所以干脆去掉插值，直接传参即可。

<tr *ngFor="let account of accounts | customRangeFilter:'startDate':'endDate'">

用于从 angular 5 中的两个日期过滤列表的自定义管道

custom pipe for list filtering from two dates in angular 5

angular

angular5

ngfor

angular-pipe