angular - ngClass 多次调用方法

Question

这个问题已经有答案了:

Why is ngClass calling function indefinitely? (1 个回答)

已关闭 4 年前。

我创建了一个方法并将其附加到 ngClass，以便根据条件添加两种样式。我还将数字作为参数传递以在 switch case 中使用。

组件.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)">

组件.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;
   }

通过这种方式，我将circleClasses绑定(bind)到我的模板。

但我面临的问题是 setMyClassesCircle() 方法被调用超过 10 次，而我只调用该方法四次。“Inside method”在我的控制台中打印超过 10 次。

我无法弄清楚为什么该方法被调用这么多次。

Answer 1

我认为由于 Angular 变化检测，它被调用了很多次，更干净的解决方案是像这样使用 ngclass 内联:

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