Angularfire2 Infinite function call


#1

Hi guys I faced with strange behaviour of function when tried to add class to item;
I got next code

<flip-card *ngFor="let card of cards; let i = index"
     [ngClass]="getCardClass(i)"
     (click)="flipCard()"
     [card]="card">
  </flip-card>
  ....
  getCardClass(i:number) {
    console.log(i);
    return `card-${i}`;
  }

so in console I see that getCardClass fires infinite times. Why it could be happened? I got no any observables in app, nothing that can call changeDetection. any ideas?

even when I use simples code like

<div>{{getName()}}</div>
...
getName = () => {
    console.log('infinite');
    return 'Name';
}

I see in console ‘infinite’ infinite times.

After digging I found that the reason if included angularfire2 in app. after I assign in constructor of my service AngularFireAuth everything is turning into infinite loop (((


#2

I am inclined to believe it is because the way angular works and its change detection mechanisme for templates. It is testing if the value changes over time, so calls indefinitely.

Personally I wouldn’t bind a property in a template to a function, but put the classname as part of the card object type. Will perform better anyway (trade cpu over memory). So card would be of type Object with property templateClass: string besides anything else you want to show of card in the template.

By the way, your (click) handler should have an expression, otherwise you don’t know which card is clicked, if that is needed. flipCard(i). And actually, I wouldn’t use let i =index either and pass card to the functions directly (flipCard(card)). That will save you some code and handling as well.


#3

thanks for the answer, but I found the problem. it is in angularfire


#4

Hi, how you fix it ?