Question

在我的html中，我有一些表单字段，我想传递给自定义管道进行过滤：

<input type="text" [(ngModel)]="filter1"></td>
<input type="text" [(ngModel)]="filter2"></td>
<input type="text" [(ngModel)]="filter3"></td>

<tr *ngFor="let a of arr | myFilter: filter1:filter2:filter3;>
  ...
</tr>

但要实现这一点，我必须在我的班级中定义所有过滤器：

export class MyComponent implements OnInit {
  filter1;
  filter2;
  filter3;
}

这个看起来很干净。有没有更好的解决方案，我不必在班上定义这些过滤器？

Answer 1

使用管道的另一种方法是维护一个包含* ngFor将绑定到的数组的模型类。您可以在模型属性上设置用于在用户输入更改时过滤该数组的设置器。

Answer 2

它看起来干净简单。

export class MyFilter implements PipeTransform {    
  transform(value:any, arg1:any, arg2:any,arg3:any):any {
        ...
}

因为您需要三个值来使用这种方式转换数据。

Angular4 - 将表单数据直接传递给管道

2 个答案: