[英]PrimeNg button: how to set the disabled state in html
So I have setup a primeng button to set the disable/able state by calling a function... 所以我设置了一个primeng按钮来通过调用一个函数来设置禁用/可用状态...
The html is 的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>
the function is 功能是
disabled() {
console.log('disabled?');
return true;
}
the other components are all primeng dropdowns. 其他组成部分均是primeng下拉列表。
It all works ok but the disabled call is made every time there is any interaction with the any of the dropdowns. 一切正常,但是每次与任何下拉列表进行任何交互时,都会进行禁用的呼叫。 Many many calls...
很多电话...
Any thoughts on how I have set this up incorrectly? 关于我如何将其设置错误的任何想法?
This is happening as a result of Angular's change detection algorithm. 这是Angular的变化检测算法的结果。 Here is what is going on:
这是怎么回事:
The target [disabled]
is bound to the result of the expression disabled() == true
. 目标
[disabled]
绑定到表达式disabled() == true
。
Every time an Angular change detection cycle runs (which is often), Angular wants to make sure that no bindings have changed. 每次运行Angular变化检测周期(通常是这样)时,Angular都希望确保没有绑定发生变化。 Therefore, it reevaluates the
disabled() == true
expression. 因此,它重新评估
disabled() == true
表达式。 This causes this function to run on every cycle, and this is why you are seeing so many function calls. 这导致该函数在每个周期上运行,这就是为什么您看到如此多的函数调用的原因。
Here's the thing, this is how Angular is supposed to work. 这就是Angular的工作方式。 If you write a function in a binding, you are forcing Angular to call this function every cycle.
如果在绑定中编写函数,则将强制Angular在每个周期调用此函数。 Possible things you can do are:
您可以做的可能是:
private disabled : boolean
. private disabled : boolean
。 In this instance, Angular will only re-evaluate the binding every time disabled
changes. disabled
更改时,Angular只会重新评估绑定。 Then you can use other functions to change the state of disabled
, which will change the button. disabled
的状态,这将更改按钮。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.