PrimeNg按鈕：如何設置禁用狀態，以html

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; 
} 

其它組分都是primeng下拉菜單。

它一切正常，但每次與任何下拉菜單發生任何交互時都會禁用呼叫。很多很多電話...

任何想法，我已經設置了錯誤？

Answer 1

這是Angular的變化檢測算法的結果。這是怎麼回事：

目標[disabled]綁定到表達式disabled() == true的結果。

每次運行角度更改檢測週期（通常都是這樣），Angular希望確保沒有綁定發生變化。因此，它重新評估disabled() == true表達式。這導致這個函數在每個週期運行，這就是爲什麼你看到這麼多的函數調用。

這是事情，這是Angular應該如何工作。如果您在綁定中編寫函數，您將迫使Angular在每個週期調用此函數。可以做的事情有：

• 綁定到類變量而不是包含函數的表達式。例如一些變量如private disabled : boolean。在這種情況下，Angular只會在每次更改disabled時重新評估綁定。然後你可以使用其他功能來改變disabled的狀態，這將改變按鈕。
• 如有必要，保持原樣！就你而言，最好綁定一個類變量，但每次循環運行一個這樣的小函數並不昂貴。