PrimeNg 按钮:如何在 html 中设置禁用状态

PrimeNg button: how to set the disabled state in html

提问人:reza 提问时间:8/16/2017 更新时间:8/17/2017 访问量:21918

问:

所以我设置了一个 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 下拉列表。

一切正常,但每次与任何下拉列表进行任何交互时都会进行禁用的调用。很多很多电话...

关于我如何错误地设置它的任何想法?

angular using-directives

评论


答:

4赞 LarsMonty 8/17/2017 #1

这是由于 Angular 的变化检测算法而发生的。这是怎么回事:

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

每次运行 Angular 更改检测周期(通常)时,Angular 都希望确保没有绑定发生任何更改。因此,它会重新计算表达式。这会导致此函数在每个周期上运行,这就是为什么您会看到如此多的函数调用的原因。disabled() == true

事情是这样的,这就是 Angular 应该如何工作。如果你在绑定中编写一个函数,你就会强制 Angular 每个周期调用这个函数。您可以做的是:

  • 绑定到类变量,而不是包含函数的表达式。例如,一些变量,如 .在这种情况下,Angular 只会在每次更改时重新评估绑定。然后您可以使用其他函数来更改 的状态,这将更改按钮。private disabled : booleandisableddisabled
  • 如有必要,请保持原样!在你的例子中,绑定到一个类变量可能更好,但每个周期运行这样的小函数并不昂贵。

评论

1赞 reza 8/17/2017
我将更改为类变量。但我很好奇,在你的第二颗子弹中,你提到可能有更好的方法可以做到这一点。你能详细说明一下吗?如果可以的话,我想做得更好。
1赞 LarsMonty 8/17/2017
更好的方法是将其绑定到类变量。:)