1

我创建了一个过滤器管道来对一组对象执行过滤。该管道获取一个filterArgs对象，该对象包含一些属性，应根据这些属性过滤项目。

@Pipe({
    name: 'filter'
})
export class FilterPipe implements PipeTransform {
    transform(items: Item[], filterArgs: any): Item[] {
        return items.filter(item => ...);
    }
}

此外，我有一些输入字段，用户可以在其中设置过滤器参数。我直接绑定filterArgs对象的属性并为这样的项目应用过滤器：

<input type="date" [(ngModel)]="filterArgs.dateFrom">
<input type="date" [(ngModel)]="filterArgs.dateTo">

<ul>
    <li *ngFor="let item of items | filter:filterArgs>...</li>
</ul>

在我的组件中，filterArgs对象定义如下（示意图）：

public filterArgs: any;

ngOnInit() {
    this.filterArgs = {
        dateFrom = undefined,
        dateTo = undefined
    };
}

所以现在的问题是，当输入字段之一发生更改时，过滤器不会被应用。据我了解 Angular 的变化检测，这是因为filterArgs对象的引用没有改变，因此 Angular 没有检测到任何变化。这是预期的行为和设计。

我现在的问题是：解决此问题的建议方法是什么？

幼稚的方法是在filterArgs每次输入字段更改时创建一个新对象，以便更新该对象的引用。在这种情况下，Angular 的变更检测就会发挥作用。但必须有更好的方法来做到这一点。我想我可以filterArgs用某种属性来注释属性，告诉 Angular 执行“深度对象比较”以检测更改。

4

1 回答 1

2

对于组件和指令，您可以实现DoCheck以执行自定义更改检测，但对于管道，这不受支持。

或者，您可以使用“优化”管道

@Pipe({
    name: 'filter',
    pure: false
})

并在过滤器未更改时返回缓存结果

于 2016-05-05T15:37:06.717 回答