Angular ngClass多次调用方法

我已经创建了一个方法，并将其附加到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)">

通过这种方式，我将CircleClass绑定到我的模板

但是我面临的问题是setMyClassesCircle（）方法被调用了10多次，而我只调用了4次。在我的控制台中，“Inside方法”被打印了10多次

---

我不明白为什么要多次调用该方法。

Angular在changedetection生命周期中运行几次，以确定函数的结果是否已更改。它将在您每次单击事件或发生类似事件时运行，以确定事件是否再次更改。由于这个原因，不建议将值绑定到函数，相反，您应该计算.ts文件中的值，并仅根据预先计算的值进行绑定。

我认为由于角度变化检测，它调用了很多次，更干净的解决方案是使用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 }" >

---

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

这将是您的seq：

第一次检测更改–调用方法–4次。 第二次检测更改–方法调用–4次。 第三次检测更改–方法调用–4次。 第四次检测更改–方法调用–4次。

---

因此，如果有4个节点，那么整个方法应该被调用16次。尝试删除1节点，您的方法应该被调用4 X 3=12次。这就是Angular的工作原理

这是例外。您正在模板中使用一种方法，每次检测到的更改都会调用该方法。根据您在Ehsan Kiani回答的评论部分中的疑问，stackblitz.com上的演示代码将更有帮助。这不是一个精确的解决方案，因为问题也有一个条件，取决于

1

，

2

。。。以此类推，这个问题只有4个条件，你们可以在开关块中看到，让op来决定答案..再多说一点..你能给我一个方法来改变属性值吗？这个属性值是在类中声明的，但是已经根据ngOnInit中的一个条件改变了..这个更新的值应该被视图接受我很抱歉，但是你能解释一下吗more@Sathyanarayanan那是因为你不知道绑定号码，像这样更改我需要根据ngOnInit中的条件更改我的属性值。但我的视图未更新为最新值。我已尝试ngAfterViewInit Too如何在值到达模板之前预先计算值。例如：我已声明myVar=5，我希望在值到达模板之前根据条件进行更改模板。谢谢你的帮助

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