遍历 thymeleaf 中的列表集合答案

【问题标题】：Iterating over the list collection in thymeleaf遍历 thymeleaf 中的列表集合
【发布时间】：2019-07-07 10:36:03
【问题描述】：

我正在尝试创建一个简单的列表，该列表从 List 集合中返回来自控制器的结果。以前，我将列表中的每个单独的结果一一写出来，但我知道根据 DRY 原则，这是一种不好的做法。这就是我试图改变它的原因。我不是百里香的朋友。

我在乎：

直到列表不为空，我创建了带有结果的表格，就像我之前所做的那样。只是这次以循环的形式。
那么可以选择一个表，然后将其保存在存储库中，我该怎么做？在每个表下使用提交？

请帮忙。谢谢

  <!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <title>Bootstrap Example</title>
        <html xmlns:th="http://www.thymeleaf.org">

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" type="text/css"
              href="css/font.css"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        <script src="js/chart.js"></script>
        </head>
    <body>

    <div class="container">
        <h2>Cheapest Flight</h2>


        <div class="list-group">
            <a href="#" class="list-group-item ">

                <b><img th:src="@{'http://pics.avs.io/400/400/' + ${AirlineIataFirst} + '.png'}"></b>

        Bad code /////......

                <c><p th:text="'Airline:  ' + ${AirlineFirst}"/></c>
                <d><p th:text="'Price:  ' + ${PriceFirst}+ ${Currency}"/></d>
                <e><p th:text="'Departure:  ' + ${DepartureFirst} "/></e>
                <f><p th:text="'Return:  ' + ${ReturnFirst} "/></f>


            </a>

而我正在尝试做的事情：

<a href="#" class="list-group-item" th:if="${flight != null}" >

<b><img th:src="@{'http://pics.avs.io/400/400/' + ${AirlineIataFourth} + '.png'}"></b>


<li th:each="flights : ${flight}" th:text="${flight}"></li>
<li th:each="prices : ${price}" th:text="${price}"></li>
 <c><p th:text="'Airline:  ' + ${flight}"/></c>
 <d><p th:text="'Price:  ' + ${price}+ ${Currency}"/></d>
 <e><p th:text="'Departure:  ' + ${DepartureFourth} "/></e>
 <f><p th:text="'Return:  ' + ${ReturnFourth} "/></f>

控制器：

        model.addAttribute("Currency", flightDTO.getCurrency());
        model.addAttribute("flight", cheapFlyService.flightList(output));
        model.addAttribute("number", cheapFlyService.flightNumberList(output));
        model.addAttribute("return", cheapFlyService.returnAtList(output));
        model.addAttribute("departure", cheapFlyService.departureAtList(output));
        model.addAttribute("price", cheapFlyService.priceList(output));

【问题讨论】：

标签： java spring thymeleaf

【解决方案1】：

在第二种情况下，它似乎不是有效的 HTML 标记。您的<a> 永远不会关闭。此外，您可能应该远离使用 <b> 之类的东西，因为它非常令人困惑（这是一种不推荐使用的粗体文本方式）。删除所有这些类型的标签，因为它不是有效的 HTML，或者只是令人困惑。

此外，虽然它会起作用，但 th:each 上的命名是向后的。您应该通过多个航班，并且只参考一个航班：

控制器：

    model.addAttribute("currency", flightDTO.getCurrency());
    model.addAttribute("flights", cheapFlyService.flightList(output));
    model.addAttribute("numbers", cheapFlyService.flightNumberList(output));
    model.addAttribute("returns", cheapFlyService.returnAtList(output));
    model.addAttribute("departures", cheapFlyService.departureAtList(output));
    model.addAttribute("prices", cheapFlyService.priceList(output));

HTML：

<th:block th:each="flight : ${flights}">
    <span th:text=${flight.number}" th:remove="tag">[Flight Number]</span> <!-- or whatever property is that the Flight class may have.  Note the scoping. -->
</th:block>

但主要的反馈是完整的 HTML 将取决于您如何对数据建模。例如，如果航班有一个名为 routes 的属性，那么您可以在 Thymeleaf 中使用内部循环迭代 routes。否则，您将向模型添加单独的列表，您只需在每个列表上调用 toString 方法：

<th:block th:each="departure : ${departures}">
    <span th:text=${departure}" th:remove="tag">[This is calling toString() on the objects in the list]</span>
</th:block>

一般调试提示：从有效的东西开始，然后逐渐添加。如果有东西坏了，你迷路了，把所有东西都拿走，直到它起作用，然后逐渐重新添加，直到找到罪魁祸首。

【讨论】：