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