java - 遍历 thymeleaf 中的列表集合
问题描述
我正在尝试创建一个简单的列表,该列表从 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));
解决方案
在第二种情况下,它似乎不是有效的 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
,那么您可以routes
在 Thymeleaf 中使用内部循环进行迭代。否则,您将向模型添加单独的列表,您只需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>
一般调试提示:从有效的东西开始,逐渐添加。如果有东西坏了,你迷路了,把所有东西都拿走,直到它起作用,然后逐渐重新添加,直到找到罪魁祸首。
推荐阅读
- python - 机器学习 Sololearn 关于 Coulmn 数据等的 Coach 问题
- c++ - 无法理解 OBS-Studio 源代码中的 typedef 指针函数声明
- vbscript - 经典 ASP 解码
- python - 我无法使用脚本登录
- node.js - 将多个范围 (ACL) 中间件传递给路由只是测试第一个范围
- java - 找不到方法错误的实现方法
- blazor - Blazor 声称传输用户名 var 的问题
- reactjs - ReactJS 应用程序不断被部署到 Heroku,使用开发版本而不是生产版本
- c++ - C++如何同时运行2个boost:asio:io_context
- java - Android listView 适配器是否应该有 api 调用