Question

所以我设置了一个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;
}

其他组成部分都是素数下降。

一切正常但每次与任何下拉列表进行任何交互时都会进行禁用呼叫。许多人打来电话......

有关我如何错误设置的任何想法？

Answer 1

这是Angular的变化检测算法的结果。这是正在发生的事情：

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

每次运行Angular变化检测周期（通常）时，Angular都希望确保没有任何绑定发生变化。因此，它重新评估disabled() == true表达式。这导致此函数在每个循环上运行，这就是您看到如此多函数调用的原因。

这就是事情，这就是Angular应该如何工作。如果你在一个绑定中编写一个函数，你就强迫Angular在每个循环中调用这个函数。你可以做的可能是：

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

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

1 个答案: