ngClass调用方法多次 [英] ngClass calls method Multiple times

问题描述

我创建了一个方法并将其附加到ngClass上，以根据条件添加两种样式.我还传递了数字作为参数以用于切换情况.

I have created a method and attached it to ngClass for adding two styles depending upon the condition.I am also passing the number as parameter to be used in the switch case.

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

通过这种方式，我将circleClasses绑定到了模板上.

Through this way I am binding circleClasses to my template.

但是我面临的问题是setMyClassesCircle()方法被调用了十次以上，而我仅被调用了四次.'Insidemethod'在我的控制台中被打印了十次以上.

But the issue I am facing is setMyClassesCircle() method is called more than 10 times, while I am calling the method only four times.'Inside method' is printed more than 10 times in my console.

我不知道为什么这么多次调用该方法.

I could not figure out why the method is being called these many number of times.

推荐答案

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

I think it called many times because of angular change detection, the cleaner solution is to use ngclass in-line like this:

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

这篇关于ngClass调用方法多次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！