Angular 管道未检测到多个参数的变化

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 box 即第二个参数。

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

当我在搜索栏中键入内容时，过滤器会触发。我还确认 select 框中的值传递给了 carFilter。 问题是... 当我单独更改 select 框中的值时，过滤器 carFilter 不会触发。

如果我从过滤器中删除 searchBar 参数，那么 select 框中的更改将触发过滤器。 如何让管道检测 both/multiple 参数的变化？

Answer 1

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

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

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

Answer 2

好吧，经过几次尝试和错误，我明白了。如果你想触发多个参数，例如 sortBoxInput 和 searchBoxInput，你必须制作两个单独的过滤器。我想这对于那些更习惯的人来说是显而易见的 angular 但我是新手。

所以我将我的单个过滤器拆分为两个，即 searchFilter 和 sortFilter。

然后我将 html 更改为：

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

Angular 管道未检测到多个参数的变化

Angular Pipe not detecting changes with multiple arguments

angular

angular5

ngfor

angular-pipe