Question

我正在使用此过滤器管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {
  transform(items: any[], field: string, value: string): any[] {
    if (!items) {
        return [];
    }
    if (!field || !value) {
        return items;
    }

    return items.filter(singleItem =>
        singleItem[field].toLowerCase().includes(value.toLowerCase())
    )}
}

输入：

<input placeholder="Nome do produto" [(ngModel)]="anunciosFiltro.name" type="text" name="filtra" id="filtra">

我有一张要应用此管道过滤器的表格：

<div *ngFor="let tabelaAnuncioContas of sortedData?.Contas; let a = index" >
    <table>
      <tr *ngFor="let anuncio of tabelaAnuncioContas.Anuncio.products | search: 'name' : anunciosFiltro.name; let i = index">

         <td>

            <svg class="componenteTabelaResponsivo" matTooltip="Anúncio ativo" *ngIf="anuncio.status == 'enabled' && anuncio.associations[0].status == 'linked'" style="width:24px;height:24px" viewBox="0 0 24 24">
                                <path fill="rgb(161,196,66)" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" />
            </svg>

         </td>

      </tr>
    </table>
</div>

我的管道过滤器正常运行，但是当我过滤并发出更改表(sortedData)的数据的http请求时，过滤器不会更新数据：

changeDataTable(){   
 this.sortedData.Contas[this.indexContaAlterada].Anuncio.products[this.indexAnuncioAlterado].status = status;
}

我在模板中的status保持初始值。

Answer 1

您的管道需要不纯：

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

https://angular.io/guide/pipes#pure-and-impure-pipes

Answer 2

这与管道的处理方式有关，主要是由于here中所述纯管道和不纯管道的不同。

您可以通过以下操作将管道设置为在类装饰器上不纯：

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

但是您应该非常小心如何使用它。 angular的第一个版本同时具有filter和orderBy管道，有意将其删除。 here

描述了这样做的原因

因此，我建议您尽可能避免使用管道。否则，您可能会使管道不纯净（如上所示），这将导致您期望的行为。

数据更改时，我的搜索管道过滤器不会更新模板

2 个答案: