Question

所以我总而言之：

一个用于显示一系列汽车的ng：

<div class="carContainer" *ngFor="let car of 
cars | carFilter: brand : color">

搜索框，它是过滤器的第一个参数。

<input type="text" class="form-control" 
placeholder="Search car brand" [(ngModel)]="searchInput">

选择第二个参数框。

<select class="form-control" [(ngModel)]="color">
  <option value="red">red</option>
  <option value="blue">blue</option>
  <option value="black">black</option>
  <option value="orange">orange</option>
</select>

当我在搜索栏中输入内容时，过滤器就会触发。我还确认了来自选择框的值将传递给carFilter。 问题是... 。当我仅在选择框中更改值时，过滤器 carFilter 不会触发。

如果我从过滤器中删除了searchBar参数，则选择框中的更改将触发过滤器。 如何使管道检测两个/多个参数中的更改？

Answer 1

好几次尝试和错误之后，我弄清楚了。如果您想要多个参数（例如 sortBoxInput 和 searchBoxInput ）的触发器，则必须制作两个单独的过滤器。我想对于那些习惯于成角度但我是新手的人来说是显而易见的。

所以我将单个过滤器分为两个，分别是searchFilter和sortFilter。

然后我将html更改为：

    <div class="carsContainer" 
    *ngFor="let car of cars | searchFilter : brand | sortFilter : color">

Answer 2

您可能没有正确接收参数。

transform(value: string[], ...args: any[]): string[] {}

确保您收到的数组中第一个参数是值，第二个属性是属性。

Angular Pipe无法检测到具有多个参数的更改

2 个答案: