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:
Ao pesquisar por "outro", as colunas buscadas são erradas:
E então a checkbox que estava checada leva uncheck:
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])));
}
}
<input
possui doisname
s. Não seria{{custosFixos[i].nome}}
?trackBy
para aumentar o desempenho do seu filtro. Mais info em inglês aqui