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

时间:2019-01-25 14:54:15

标签: angular angular5 ngfor angular-pipe

所以我总而言之:

  1. 一个用于显示一系列汽车的ng:

    <div class="carContainer" *ngFor="let car of 
    cars | carFilter: brand : color">
    
  2. 搜索框,它是过滤器的第一个参数。

    <input type="text" class="form-control" 
    placeholder="Search car brand" [(ngModel)]="searchInput">
    
  3. 选择第二个参数框。

    <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参数,则选择框中的更改将触发过滤器。 如何使管道检测两个/多个参数中的更改?

2 个答案:

答案 0 :(得分:1)

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

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

然后我将html更改为:

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

答案 1 :(得分:0)

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

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

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