thymeleaf：文本和圖標在同一個TD

我想提出一個表中的文本&圖標，像這樣的同一個小區，但似乎因爲只有文本顯示thymeleaf：文本和圖標在同一個TD

<td class="col_name" th:text="${mareSuperiora.linkQuality}" >GOOD 
    <span th:if="${mareSuperiora.linkQuality == 'EXCELLENT'}" >              
    <i class="fa fa-signal fa-2x" style="color:#009933; text-align: center;" aria-hidden="true"></i>           
    </span> 
    <span th:if="${mareSuperiora.linkQuality == 'GOOD'}" >              
    <i class="fa fa-signal fa-2x" style="color:#0066cc; text-align: center;" aria-hidden="true"></i>           
    </span> 
    <span th:if="${mareSuperiora.linkQuality == 'AVERAGE'}" >              
    <i class="fa fa-signal fa-2x" style="color:#ff9900; text-align: center;" aria-hidden="true"></i>           
    </span> 
    <span th:if="${mareSuperiora.linkQuality == 'LIMIT'}" >              
    <i class="fa fa-signal fa-2x" style="color:#ff5050; text-align: center;" aria-hidden="true"></i>           
    </span> 
</td><!-- NAME -->

來源

2017-06-12 La Carbonell

你確定你重新包括字體真棒庫嗎？ –

是的，我在模板的另一部分使用它 –

這是行不通的th:text將替換所有的孩子節點，在這種情況下也是圖標的標記。解決方案是爲文本部分添加一個專用的span：

<td class="col_name"> 
    <span th:text="${mareSuperiora.linkQuality}">GOOD</span> 
    <span th:if="${mareSuperiora.linkQuality == 'EXCELLENT'}" >              
    <i class="fa fa-signal fa-2x" style="color:#009933; text-align: center;" aria-hidden="true"></i>           
    </span> 
    <span th:if="${mareSuperiora.linkQuality == 'GOOD'}" >              
    <i class="fa fa-signal fa-2x" style="color:#0066cc; text-align: center;" aria-hidden="true"></i>           
    </span> 
    <!-- and so on --> 
</td>

來源

2017-06-12 13:46:48 holmis83

thymeleaf：文本和圖標在同一個TD

回答

相關問題