如何在Thymeleaf中当列表为空时显示页面提示信息

我需要在用户未创建任何交易的情况下，在Transactions页面展示「您尚未创建任何交易」的提示。控制器在空列表时会打印「Empty」，但页面提示始终不显示，尝试了相关判断方法仍未解决。

控制器代码 #

@GetMapping("/userTransactions/{user_id}")
public String getUserTransactions(@PathVariable("user_id") long user_id, TransactionGroup transactionGroup, Model model) {
    Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
    UserDetailsImpl user = (UserDetailsImpl) authentication.getPrincipal();
    long userId = user.getId();
    model.addAttribute("userId", userId);

    List<Transaction> transactions = transactionRepository.getTransactionsByUserId(user_id);
    List<TransactionGroup> transactionByDate = new ArrayList<>();
    List<Transaction> transOnSingleDate = new ArrayList<>();
    boolean currDates = transactions.stream().findFirst().isPresent();

    if (currDates) {
        LocalDate currDate = transactions.get(0).getDate();

        TransactionGroup transGroup = new TransactionGroup();

        for (Transaction t : transactions) {
            if (!currDate.isEqual(t.getDate())) {
                transGroup.setDate(currDate);
                transGroup.setTransactions(transOnSingleDate);
                transactionByDate.add(transGroup);
                transGroup = new TransactionGroup();
                transOnSingleDate = new ArrayList<>();
            }

            transOnSingleDate.add(t);
            currDate = t.getDate();
        }
        transGroup.setDate(currDate);
        transGroup.setTransactions(transOnSingleDate);

        transactionByDate.add(transGroup);
    } else {
        System.out.println("Empty");
        model.addAttribute("transactionGroup", "NoData");
    }
    model.addAttribute("transactionGroup", transactionByDate);
    return "transactions";
}

Thymeleaf模板代码 #

<div class="date" th:each="singleGroup  : ${transactionGroup}">
    <h1 th:text="${singleGroup .date}"></h1>
    <div class="transaction" th:each="singleTrans  : ${singleGroup.transactions}">
        <h2>Amount: <span th:text="${singleTrans.amount}"></span></h2><br>
        <h2>Note: <span th:text="${singleTrans.note}"></span></h2><br>
        <h2>Wallet name: <span th:text="${singleTrans .walletName}"></span></h2><br>
        <h2>Expense Category: <span th:text="${singleTrans .expenseCategories}"></span></h2><br>
        <h2>IncomeCategory: <span th:text="${singleTrans .incomeCategories}"></span></h2>
        <a class="card__link" th:href="@{/api/transaction/delete/{id}(id=${singleTrans.id})}"
           th:data-confirm-delete="|Are you sure you want to delete ${singleTrans.walletName} wallet?|"
           onclick="if (!confirm(this.getAttribute('data-confirm-delete'))) return false">Delete</a>
        <hr>
    </div>
    <th:block th:if="${transactionGroup=='NoData'}"> No Data Found </th:block>
</div>

问题原因分析 #

1. Model属性被覆盖：
   在else分支中你设置了model.addAttribute("transactionGroup", "NoData")，但之后无论分支如何，都会执行model.addAttribute("transactionGroup", transactionByDate)，这会直接覆盖之前的设置。空数据时transactionByDate是空的ArrayList，页面拿到的是空列表而非字符串"NoData"，导致判断条件${transactionGroup=='NoData'}永远不成立。

2. 提示块位置错误：
   提示块放在了th:each="singleGroup : ${transactionGroup}"的div内部，当transactionGroup为空列表时，循环不会执行，内部的提示块自然不会被渲染。

解决方案 #

修改控制器代码 #

去掉无效的"NoData"属性设置，保持transactionByDate为空列表即可，可额外添加布尔属性方便页面判断：

@GetMapping("/userTransactions/{user_id}")
public String getUserTransactions(@PathVariable("user_id") long user_id, TransactionGroup transactionGroup, Model model) {
    Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
    UserDetailsImpl user = (UserDetailsImpl) authentication.getPrincipal();
    long userId = user.getId();
    model.addAttribute("userId", userId);

    List<Transaction> transactions = transactionRepository.getTransactionsByUserId(user_id);
    List<TransactionGroup> transactionByDate = new ArrayList<>();
    List<Transaction> transOnSingleDate = new ArrayList<>();
    boolean currDates = transactions.stream().findFirst().isPresent();

    if (currDates) {
        LocalDate currDate = transactions.get(0).getDate();

        TransactionGroup transGroup = new TransactionGroup();

        for (Transaction t : transactions) {
            if (!currDate.isEqual(t.getDate())) {
                transGroup.setDate(currDate);
                transGroup.setTransactions(transOnSingleDate);
                transactionByDate.add(transGroup);
                transGroup = new TransactionGroup();
                transOnSingleDate = new ArrayList<>();
            }

            transOnSingleDate.add(t);
            currDate = t.getDate();
        }
        transGroup.setDate(currDate);
        transGroup.setTransactions(transOnSingleDate);

        transactionByDate.add(transGroup);
    } else {
        System.out.println("Empty");
        // 空数据时保持transactionByDate为空即可
    }
    model.addAttribute("transactionGroup", transactionByDate);
    // 添加布尔属性标记是否有交易
    model.addAttribute("hasTransactions", !transactionByDate.isEmpty());
    return "transactions";
}

修改Thymeleaf模板 #

将提示块移到循环外部，通过布尔属性判断是否显示：

<!-- 空状态提示 -->
<div th:if="${!hasTransactions}">
    <p>您尚未创建任何交易</p>
</div>

<!-- 有交易时渲染列表 -->
<div class="date" th:each="singleGroup : ${transactionGroup}" th:if="${hasTransactions}">
    <h1 th:text="${singleGroup.date}"></h1>
    <div class="transaction" th:each="singleTrans : ${singleGroup.transactions}">
        <h2>Amount: <span th:text="${singleTrans.amount}"></span></h2><br>
        <h2>Note: <span th:text="${singleTrans.note}"></span></h2><br>
        <h2>Wallet name: <span th:text="${singleTrans.walletName}"></span></h2><br>
        <h2>Expense Category: <span th:text="${singleTrans.expenseCategories}"></span></h2><br>
        <h2>IncomeCategory: <span th:text="${singleTrans.incomeCategories}"></span></h2>
        <a class="card__link" th:href="@{/api/transaction/delete/{id}(id=${singleTrans.id})}"
           th:data-confirm-delete="|Are you sure you want to delete ${singleTrans.walletName} wallet?|"
           onclick="if (!confirm(this.getAttribute('data-confirm-delete'))) return false">Delete</a>
        <hr>
    </div>
</div>

也可以不添加额外属性，直接用Thymeleaf的列表工具类判断：

<th:block th:if="${#lists.isEmpty(transactionGroup)}">
    <p>您尚未创建任何交易</p>
</th:block>

<div class="date" th:each="singleGroup : ${transactionGroup}" th:unless="${#lists.isEmpty(transactionGroup)}">
    <!-- 交易列表内容 -->
</div>

内容的提问来源于stack exchange，提问作者Frosty Nah