My filter pipe is returning the wrong columns from my table

2

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

Possessing 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 remaining column is with the "value" and "expiration" fields in the other field:

Table without the filter:

Whensearchingfor"other", the columns you are looking for are wrong:

Andthenthecheckboxthatwascheckedtakesuncheck:

Partofthetemplateresponsibleforthefilter:

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

  }
}
    
asked by anonymous 03.10.2018 / 22:23

1 answer

1

Who cares, I've managed to solve by changing the inputs:

  

[(ngModel)]="Fixed cost [i] .value"

for the variable iterated by ngfor:

[(ngModel)]="custofixo.valor"

And the combobox that was taking uncheck, I added a ngModel to it:

[(ngModel)]="custovariavel.calculacusto

Now it returns the correct columns of my table and the combobox continue to persist the checks when passing through the filter.

    
04.10.2018 / 14:51