Question

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

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绑定到了模板上。

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

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

Answer 1

Angular运行changedetection生命周期数次，以确定函数的结果是否已更改。每当您单击事物或发生类似事件以确定事物是否再次发生变化时，它将运行它。出于这个原因，不建议将值绑定到函数，而是应该在.ts文件中计算值，然后仅对预先计算的值进行绑定。

Answer 2

我认为它是由于角度变化检测而被多次调用的，更干净的解决方案是像这样以内联方式使用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 }" >

Answer 3

DOM中有四个节点“ Div”，因此每个节点至少调用一次，并且每次您的方法返回不同的值时都会再次提高4倍。

就像这是你的序列：

第一个检测到更改–称为–4次的方法。第2次检测更改–称为–4次的方法。第3次检测更改–称为–4次的方法。第四次检测更改–称为–4次的方法。因此，如果有4个节点，则整个方法应被调用16次。尝试删除1-Node，您的方法应称为4 X 3 = 12次。这就是Angular的工作方式！

ngClass调用方法多次

3 个答案: