ngFor内的无限循环

Question

im trying to put an ngIf on a div, inside of a ngFor in a td element. I have this in my html component:

<td id="fila{{registro.id}}" *ngFor="let campo of cabeceras">
    <div *ngIf="matching(registro[campo])">{{registro[campo]}}</div>
</td>

Also, the matching() function in my component.ts is:

matching(valor) : boolean {
        var resultado : boolean = true;
        if(valor.toString.match(this.filtertext) == null ){
            resultado = false;
        }
        return resultado;
    }

I dont understand why but the ngIf calls the function all the time.

Thanks.

Answer 1

Angular evaluates all bindings every time when it runs another change detection cycle.

It is better to assign the result to a field and bind to that field instead of binding to a function.

Create an array of results beforehand and bind to this array instead of

matching(registro[campo])

Introducing an index in ngFor makes this easy

*ngFor="let campo of cabeceras; let i=idx"