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'">

用于从角度5中的两个日期进行列表过滤的自定义管道

2 个答案: