My filter pipe is returning the wrong columns from my table

Asked

Viewed 90 times

2

I tried to deploy a filter pipe but realized two wrong behaviors.

Having two elements in my table:

sfafasf:150,00 and other variable cost: 80,00

When you put the name "other variable cost" in the filter field, the first row of the column disappears as expected, but the column that remained has the fields "value" and "maturity" of the other field:

Table without the filter:

inserir a descrição da imagem aqui

When searching for "other", the search columns are wrong:

inserir a descrição da imagem aqui

And then the checkbox you were checking takes uncheck:

inserir a descrição da imagem aqui

Part of the template responsible for the filter:

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

My 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])));

  }
}
  • I found a mistake only, I don’t know if it was on purpose: the last <input has two names. It would not be {{custosFixos[i].nome}}?

  • That wasn’t it, I got it sorted out, I’ll post the answer here.

  • I’m glad you solved it. A tip: Use trackBy to increase the performance of your filter. More info here

1 answer

1


To whom interested, I was able to solve by switching inputs:

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

for the variable iterated by ngfor:

[(ngModel)]="custofixo.valor"

And the combobox that was leading uncheck, I added an ngModel to it:

[(ngModel)]="custovariavel.calculacusto

Now return the correct columns of my table and the combobox continue to persist checks when going through the filter.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.