angular - ngClass memanggil metode beberapa kali

Saya telah membuat sebuah metode dan menempelkannya ke ngClass untuk menambahkan dua gaya tergantung pada kondisinya. Saya juga mengirimkan angka sebagai parameter untuk digunakan dalam switch case.

komponen.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;
   }

Melalui cara ini saya mengikat circleClasses ke template saya.

Tapi masalah yang saya hadapi adalah metode setMyClassesCircle() dipanggil lebih dari 10 kali, padahal saya hanya memanggil metode tersebut empat kali. 'Inside method' tercetak lebih dari 10 kali di konsol saya.

Saya tidak bisa memahami mengapa metode itu dipanggil begitu banyak kali.

Jawaban #1

Saya pikir itu dipanggil berkali-kali karena deteksi perubahan Angular, solusi yang lebih bersih adalah menggunakan ngclass secara langsung seperti ini:

    <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 }" >

Jawaban #2

Angular menjalankan siklus hidup change detection beberapa kali untuk menentukan apakah hasil dari fungsi Anda telah berubah. Itu akan menjalankannya setiap kali Anda mengklik sesuatu atau peristiwa serupa terjadi untuk menentukan apakah ada perubahan lagi. Mengikat nilai ke fungsi tidak disarankan karena alasan ini, sebaiknya Anda menghitung nilai-nilai tersebut di file .ts Anda dan hanya mengikat terhadap nilai yang telah dihitung sebelumnya.