Thymeleaf - 如何創建進度條？

Question

我試圖在 Thymeleaf 模板引擎中創建一個引導進度條

這是我嘗試過的：

<div class="progress-bar bg-blue" role="progressbar" th:style="'width:' +${order.total == 0  ? '0' : (order.completed / order.total) * 100 } +'%';" aria-valuemin="0" aria-valuemax="100" th:text="${order.total == 0  ? '0' : (order.completed / order.total) * 100  }"></div>

這是我遇到的錯誤

Could not parse as expression: "'width:' +${order.total == 0  ? '0' : (order.completed / order.total) * 100 } +'%';" (template: "/fragments/menus-progress.html" - line 59, col 98)

Answer 1

我發現在這種特定情況下，如果您將每個變量都包含在它們自己的${...}中，那么閱讀邏輯會稍微容易一些 - 但您不必這樣做*。

你有一個語法錯誤，因為你有+'%'; ，最后在哪里; 在引用的文本之后。 它應該是引用文本的一部分： +'%;' .

要從計算中獲得有意義的值，請確保您使用的是浮點數，而不是整數。 對於整數，您的值將計算為 0 或 1。

我添加了額外的括號，以使條件評估表達式與字符串連接分開。

這是我的版本：

<div 
     role="progressbar" 
     th:style="'width:' + ( ${order.total} == 0  ? '0' : (${order.completed * 1.0} / ${order.total}) * 100.0 ) + '%;'" 
     aria-valuemin="0" 
     aria-valuemax="100"
     th:text="${order.total == 0  ? '0' : (order.completed * 1.0 / order.total) * 100.0  }">
</div>

最后說明：這顯然是一個完全 static 進度條。 如果沒有往返服務器，它將不會更新。

* 除非您特別想控制表達式如何使用 OGNL 與 Thymeleaf 評估。