PrimeNg按钮：如何设置禁用状态，以html

所以，我已经建立了primeng按钮，通过调用一个函数来设置禁用/能状态......PrimeNg按钮：如何设置禁用状态，以html

的HTML是

<div> 
<form name="searchForm" role="form"> 
    <div class="form-group"> 
     <location-tree 
       (selectedLocationsE) = locationChangeHandler($event) 
     ></location-tree> 
     <br/> 
    </div> 
    <div class="form-group"> 
     <units 
       (selectedUnitsE) = unitChangeHandler($event) 
       [locationsI]="locations" 
     ></units> 
     <br/> 
    </div> 
    <div class="form-group"> 
     <bundles></bundles> 
     <br/> 
    </div> 
    <div class="form-group"> 
     <time-range></time-range> 
     <br/> 
    </div> 
    <br/> 
    <div> 
     <button 
       pButton type="button" [disabled]="disabled() == true" (click)="run()" label="Query"></button> 
     Metric constant 
    </div> 
</form>

功能是

disabled() { 
    console.log('disabled?'); 
    return true; 
}

其它组分都是primeng下拉菜单。

它一切正常，但每次与任何下拉菜单发生任何交互时都会禁用呼叫。很多很多电话...

任何想法，我已经设置了错误？

来源

2017-08-16 reza

这是Angular的变化检测算法的结果。这是怎么回事：

目标[disabled]绑定到表达式disabled() == true的结果。

每次运行角度更改检测周期（通常都是这样），Angular希望确保没有绑定发生变化。因此，它重新评估disabled() == true表达式。这导致这个函数在每个周期运行，这就是为什么你看到这么多的函数调用。

这是事情，这是Angular应该如何工作。如果您在绑定中编写函数，您将迫使Angular在每个周期调用此函数。可以做的事情有：

绑定到类变量而不是包含函数的表达式。例如一些变量如private disabled : boolean。在这种情况下，Angular只会在每次更改disabled时重新评估绑定。然后你可以使用其他功能来改变disabled的状态，这将改变按钮。
如有必要，保持原样！就你而言，最好绑定一个类变量，但每次循环运行一个这样的小函数并不昂贵。

来源

2017-08-16 17:32:50 LarsMonty

我将更改为类变量。但我很好奇，在你的第二个子弹中，你提到可能有更好的方法来做到这一点。你能详细说明吗？如果可以的话，我想要做得更好。 – reza

更好的方式是绑定到类变量。 :) – LarsMonty

啊，我不清楚这一点 – reza

PrimeNg按钮：如何设置禁用状态，以html

回答

相关问题