angular - ngClass anropar metod flera gånger

Jag har skapat en metod och kopplat den till ngClass för att lägga till två stilar beroende på villkoret. Jag skickar också numret som parameter för att användas i switch-satsen.

komponent.html

<div class="circle" [ngClass]="setMyClassesCircle(1)">
<div class="circle" [ngClass]="setMyClassesCircle(2)">
<div class="circle" [ngClass]="setMyClassesCircle(3)">
<div class="circle" [ngClass]="setMyClassesCircle(4)">

component.ts

 setMyClassesCircle(val)
 {
   let circleClasses
   console.log('Inside method')

   switch(val)
   {

     case 1:
     {

    circleClasses = {
   'inprogress-circle': this.inProgress == val,
   'completed-circle': this.oneCompleted == true

   } 
     break;
   }
   case 2:
   {
    circleClasses = {
   'inprogress-circle': this.inProgress == val,
   'completed-circle': this.twoCompleted == true
   } 
     break;
   }
   case 3:
   {
    circleClasses = {
   'inprogress-circle': this.inProgress == val,
   'completed-circle': this.threeCompleted == true
   } 
     break;
   }
   case 4:
   {
    circleClasses = {
   'inprogress-circle': this.inProgress == val,
   'completed-circle': this.fourCompleted == true
   } 
     break;
   }

På detta sätt binder jag circleClasses till min mall.

Men problemet jag stöter på är att metoden setMyClassesCircle() anropas mer än 10 gånger, medan jag bara anropar metoden fyra gånger. 'Inside method' skrivs ut mer än 10 gånger i min konsol.

Jag kunde inte lista ut varför metoden anropas så många gånger.

Svar #1

Jag tror det kallas många gånger på grund av angulars förändringsdetektion, den renare lösningen är att använda ngclass direkt i linjen så här:

    <div class="circle" [ngClass]="{
        'inprogress-circle': inProgress == 1,
       'completed-circle': oneCompleted == true }" >

 <div class="circle" [ngClass]="{
        'inprogress-circle': inProgress == 2,
       'completed-circle': oneCompleted == true }" >

 <div class="circle" [ngClass]="{
        'inprogress-circle': inProgress == 3,
       'completed-circle': oneCompleted == true }" >

 <div class="circle" [ngClass]="{
        'inprogress-circle': inProgress == 4,
       'completed-circle': oneCompleted == true }" >

Svar #2

Angular kör förändringsdetekteringslivscykeln flera gånger för att avgöra om resultatet av din funktion har ändrats. Den kommer att köra den varje gång du klickar på saker eller liknande händelser inträffar för att avgöra om saker har ändrats igen. Att binda värden till funktioner rekommenderas inte av denna anledning, istället bör du beräkna värdena i din .ts-fil och bara binda mot de förberäknade värdena.