使用 Thymeleaf + SpringMVC 迭代 div答案

【问题标题】：Iterating a div with Thymeleaf + SpringMVC使用 Thymeleaf + SpringMVC 迭代 div
【发布时间】：2016-06-23 19:08:09
【问题描述】：

我正在尝试使用 div 迭代列表，但它只重复一次。我认为这是一个 html(thyemeleaf) 代码错误，但我找不到它。我有另一个类似的迭代工作，但它使用 tr 和 td 而不是 div。

也许它不适用于 div 的？

HTML 代码

                <div id="portfoliolist" th:each="produto : ${estoque}">
                    <div class="portfolio usado escambolivre" data-cat="usado escambolivre">
                        <div class="portfolio-wrapper"> 
                        <a rel="group" title=""  th:href="'/produto?id='+${produto.id}">
                            <img th:src="'images/'+${produto.id}+'.jpg'" alt=""  class="img-responsive caixa-img-produto" />
                        </a>
                            <div class="label">
                                <div class="label-text">
                                    <span class="text-category" th:text="${produto.nome}"></span>
                                </div>
                                <div class="label-bg"></div>
                            </div>
                        </div>
                    </div>
                </div>

控制器代码

@Autowired
Estoque produtos;
@RequestMapping("/produtos")
    public String buscar(Model model){
        model.addAttribute("estoque", produtos.getProdutos());
        System.out.println(produtos.getProdutos());

        return "produtos";
    }

服务代码

@Service
public class Estoque {

    private static List<Produto> produtos = new ArrayList<>();

    static {
        produtos.add(new Produto(new BigInteger("1"), "Nike Shox", new BigDecimal("500.00"), "Modelo v3"));
        produtos.add(new Produto(new BigInteger("2"), "Conta de LoL", new BigDecimal("300.00"), "Platina 1"));
        produtos.add(new Produto(new BigInteger("3"), "Nintendo 3DS", new BigDecimal("660.00"), "Acompanha 4 jogos originais"));
        produtos.add(new Produto(new BigInteger("4"), "AWP Asiimov", new BigDecimal("130.00"), "Pouco usada (minimal wear)"));
    }

    public void addProduto(BigInteger id, String nome, BigDecimal preco, String descricao){
        produtos.add(new Produto(id, nome, preco, descricao));
    }

    public List<Produto> getProdutos(){
        return Estoque.produtos;
    }
}

And this is the result

What it should be

【问题讨论】：

System.out.println(produtos.getProdutos()); 输出什么？
Th:each 在 div 上工作。您是否查看了生成的 HTML 代码（在浏览器中查看源代码）以查看是否有四个 div？这也可能是一个 CSS 问题，隐藏了最后 3 个元素。您的 th:each 是否处于正确的水平？它放在哪里你会得到几个 div#portfomiolist，而你可能会看到一个投资组合列表和几个 div#portfolio？
@Thierry 谢谢你，我认为我的展示位置不会错，但由于你的评论，我只是仔细检查了一遍。
使用 th:href = "@{...}" 指定 URL，它是标准的 URL 语法。

标签： java loops spring-mvc thymeleaf

【解决方案1】：

谢谢大家，我已经找到答案了。

foreach 在错误的 div 中，应该在它下面的一个。

此代码现在可以使用：

                <div id="portfoliolist" >
                    <div class="portfolio usado escambolivre" data-cat="usado escambolivre" th:each="produto : ${estoque}">
                        <div class="portfolio-wrapper"> 
                        <a rel="group" title=""  th:href="'/produto?id='+${produto.id}">
                            <img th:src="'images/'+${produto.id}+'.jpg'" alt=""  class="img-responsive caixa-img-produto" />
                        </a>
                            <div class="label">
                                <div class="label-text">
                                    <span class="text-category" th:text="${produto.nome}"></span>
                                </div>
                                <div class="label-bg"></div>
                            </div>
                        </div>
                    </div>
                </div>

【讨论】：