提问人:reza 提问时间:8/16/2017 更新时间:8/17/2017 访问量:21918
PrimeNg 按钮:如何在 html 中设置禁用状态
PrimeNg button: how to set the disabled state in html
问:
所以我设置了一个 primeng 按钮,通过调用函数来设置禁用/可行状态......
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 下拉列表。
一切正常,但每次与任何下拉列表进行任何交互时都会进行禁用的调用。很多很多电话...
关于我如何错误地设置它的任何想法?
答:
4赞
LarsMonty
8/17/2017
#1
这是由于 Angular 的变化检测算法而发生的。这是怎么回事:
目标绑定到表达式 的结果。[disabled]
disabled() == true
每次运行 Angular 更改检测周期(通常)时,Angular 都希望确保没有绑定发生任何更改。因此,它会重新计算表达式。这会导致此函数在每个周期上运行,这就是为什么您会看到如此多的函数调用的原因。disabled() == true
事情是这样的,这就是 Angular 应该如何工作。如果你在绑定中编写一个函数,你就会强制 Angular 每个周期调用这个函数。您可以做的是:
- 绑定到类变量,而不是包含函数的表达式。例如,一些变量,如 .在这种情况下,Angular 只会在每次更改时重新评估绑定。然后您可以使用其他函数来更改 的状态,这将更改按钮。
private disabled : boolean
disabled
disabled
- 如有必要,请保持原样!在你的例子中,绑定到一个类变量可能更好,但每个周期运行这样的小函数并不昂贵。
评论
1赞
reza
8/17/2017
我将更改为类变量。但我很好奇,在你的第二颗子弹中,你提到可能有更好的方法可以做到这一点。你能详细说明一下吗?如果可以的话,我想做得更好。
1赞
LarsMonty
8/17/2017
更好的方法是将其绑定到类变量。:)
评论