Мой фильтр поисковой трубы не обновляет мой шаблон при изменении моих данных - PullRequest
Новая
       10

Мой фильтр поисковой трубы не обновляет мой шаблон при изменении моих данных

1 голос
/ 29 марта 2019

Я использую этот фильтр: 

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>

Мой фильтр каналов работает нормально, но когда я фильтрую и выполняю http-заявку, которая изменяет данные моей таблицы (sortedData), фильтр не обновляет данные: 

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

Мой status в шаблоне сохраняется в исходном значении.

Ответы [ 2 ]

0 голосов
/ 29 марта 2019

Это связано с тем, как обрабатываются трубы, и в основном из-за разницы чистых и нечистых труб, как описано здесь .

Вы можете просто настроить свою трубу на загрязнениеКласс декоратор, выполнив: 

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

Но вы должны быть очень осторожным , как, как его использовать.Первая версия angular имела трубы filter и orderBy, которые были намеренно удалены.Причины этого описаны здесь

Итак, я бы посоветовал вам по возможности избегать использования труб для этого.В противном случае вы можете сделать вашу трубу нечистой (как показано выше), и это приведет к ожидаемому поведению.

0 голосов
/ 29 марта 2019

Ваша труба должна быть нечистой: 

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

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

...