2

Tentei implantar um filter pipe mas percebi dois comportamentos errados.

Possuindo dois elementos na minha tabela:

sfafasf:150,00 e outro custo variavel: 80,00

Ao colocar no campo do filtro o nome "outro custo variavel", a primeira linha da coluna desaparece conforme esperado, mas a coluna que ficou está com os campos "valor" e "vencimento" do outro campo:

Tabela sem o filtro:

inserir a descrição da imagem aqui

Ao pesquisar por "outro", as colunas buscadas são erradas:

inserir a descrição da imagem aqui

E então a checkbox que estava checada leva uncheck:

inserir a descrição da imagem aqui

Parte do template responsavel pelo filtro:

<input #myInput [(ngModel)]="query" type="text" class="form-control" name="filtra" id="filtra" />
<tr *ngFor="let custofixo of custosFixos | search:'nome':query; let i = index;">
  <td scope="row">
    <div class="custom-control custom-checkbox">
      <input (click)="OnCheckboxSelectCustoFixo(i,$event)" type="checkbox" 
             class="custom-control-input" id="custosFixos{{i}}">
      <label class="custom-control-label" for="custosFixos{{i}}">
      </label>
    </div>
  </td>
  <td>{{custofixo.nome}}
  </td>
  <td>
    <input currencyMask [options]="{ nullable: true, prefix: 'R$ ', align: 'left', thousands: '.', allowNegative: false, allowZero: false, decimal: ',' }" name="valorcustofixo{{i}}" [(ngModel)]="custosFixos[i].valor" type="text"
           id="inputvalorcustofixo{{i}}" class="form-control tableinput">
  </td>
  <td>
    <input name="vencimento_padraocustofixo{{i}}" mask="00/00/0000" [(ngModel)]="custosFixos[i].vencimento_padrao"
           name="vencimento_padrao{{i}}" type="text" id="inputvencimentopadraocustofixo{{i}}" class="form-control tableinput">
  </td>
</tr>
</tbody>
</table>

Meu pipe:

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

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {
  public transform(value, keys: string, term: string) {

    if (!term) return value;
    return (value || []).filter((item) => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));

  }
}
3
  • Achei um erro apenas, não sei se foi proposital: o último <input possui dois names. Não seria {{custosFixos[i].nome}}?
    – Gaspar
    Commented 4/10/2018 às 12:00
  • Não era isso, consegui resolver, vou postar a resposta aqui. Commented 4/10/2018 às 12:48
  • Que bom que resolveu. Uma dica: Utilize trackBy para aumentar o desempenho do seu filtro. Mais info em inglês aqui
    – Gaspar
    Commented 4/10/2018 às 17:35

1 Resposta 1

1

A quem se interessar, consegui resolver trocando dos inputs:

[(ngModel)]="custoFixo[i].valor"

para a variavel iterada pelo ngfor:

[(ngModel)]="custofixo.valor"

E o combobox que estava levando uncheck, eu adicionei um ngModel para ele:

[(ngModel)]="custovariavel.calculacusto

Agora retorna as colunas corretas da minha tabela e as combobox continuam persistindo os checks ao passar pelo filter.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .