Вложенные итерации Thyemleaf запускают org.thymeleaf.exceptions.TemplateInputException

Question

Я пытаюсь перебрать список объектов и сгенерировать div class="card-deck" каждый 4 объект и вложенный div class="card" для каждого объекта.

Этот код генерирует исключение для строка 234

ОБНОВЛЕНИЕ: Примечание: строка 234 упоминается в html и имеет <!-- Error-Line 234 --> из-за отсутствия ) at ${#numbers.sequence(0,3}

    <div class="card-deck" th:each="qr: ${objects}" th:if="${qr.tableid}%4==0"> <!-- Iterate every 4 objects -->

    <!--syntax error missed clossing ) at ${#numbers.sequence(0,3) triggered the exception here -->
    <div class="card" th:each="i : ${#numbers.sequence(0,3)} ">   <!-- Error-Line 234 -->


        <!-- Some More Code -->
        <img th:src="${qr.qrcodestaticpath}" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title" align="center" th:text="'Table '+${qr.tableid}"></h5>
            <p class="card-text" align="center" th:text="'Random Generated QR Code'"></p>
            <h6 align="center" th:text=" ${qr.qrcodestring}"></h6>

        </div>
    </div>
  </div>

org.thymeleaf.exceptions.TemplateInputException: при синтаксическом анализе шаблона произошла ошибка (template: "ресурс пути к классу [templates / qrcodes.html]" - строка 234, col 10)

Я уже был на эти темы

• Как сделать if-else в Thymeleaf?
• Thymeleaf L oop До числа
• вложенный (двойной) l oop с тимелистом
• Thymeleaf - Как л oop список по индексу

и просмотр этой документации

• Итерация в Thymeleaf | Baeldung

и до сих пор не может придумать правильный способ сделать это, не вызывая exception

ОБНОВЛЕНИЕ: Исключение исправлено, логика c я пытаюсь реализовать, не имеет желаемого результата:

Результат приведенного выше фрагмента:

Представьте, что есть 8 таблиц, table1, table2 ... table8, я пытаюсь сгенерировать <div class="card-deck" ... для каждых 4 или 5 таблиц. Из-за <div class="card" th:each="i : ${#numbers.sequence(0,3)} "> я получаю 4 одинаковые таблицы.

• qr.tableid - номера таблиц, от 1 до x

Для демонстрации взгляните на это java фрагмент

int numOfObjects=11;
    for(int i=0 ;i<numOfObjects;i++)
    {
        if(i%4==0)
        {
           System.out.println();
           System.out.print("Deck:");
        }
          System.out.print("Card"+(i+1)+" ");    
     }

Вывод:

Это мой Controller

@GetMapping("/qrcodes")
      public String greetingForm(Model model) {

        List<QrObject> qr =qrRepo.findAll();
        int numOfobj= qr.size();
        int decks;

        if(numOfobj % 4==0)
            decks = numOfobj / 4 ;
        else
            decks = (numOfobj / 4) +1 ;

        int posa_periseuoun = numOfobj % 4 ;
        model.addAttribute("objects", qr);
        model.addAttribute("decks",decks);
        model.addAttribute("cards",posa_periseuoun);
        model.addAttribute("size", numOfobj);
        return "qrcodes";
      }

Answer 1

Вот подход, который, я думаю, представляет собой то, что вы пытаетесь сделать.

Конечный результат

Если перейти к конечному результату, в браузере отобразится следующий текст:

Deck: Card1 Card2 Card3 Card4
Deck: Card5 Card6 Card7 Card8
Deck: Card9 Card10 Card11 

Более полезно, HTML выглядит следующим образом:

<div class="card-deck">
    <span>Deck: </span>
    <span class="card">Card1 </span>
    <span class="card">Card2 </span>
    <span class="card">Card3 </span>
    <span class="card">Card4 </span>
</div>
<div class="card-deck">
    <span>Deck: </span>
    <span class="card">Card5 </span>
    <span class="card">Card6 </span>
    <span class="card">Card7 </span>
    <span class="card">Card8 </span>
</div>
<div class="card-deck">
    <span>Deck: </span>
    <span class="card">Card9 </span>
    <span class="card">Card10 </span>
    <span class="card">Card11 </span>
 </div>

Java Объекты

Палуба:

public class Deck {

    private final String deckName;
    private final List<Card> cards = new ArrayList();

    public Deck(String deckName) {
        this.deckName = deckName;
    }

    public List<Card> getCards() {
        return cards;
    }

    public String getDeckName() {
        return deckName;
    }

}

Карта:

public class Card {

    private final String cardName;

    public Card(String cardName) {
        this.cardName = cardName;
    }

    public String getCardName() {
        return cardName;
    }

}

Сборка колод:

Map<String, Object> model = new HashMap();

// this is equivalent to your findAll()...
List<Card> allCards = new ArrayList();
for (int i = 1; i<= 11; i++) {
    allCards.add(new Card("Card" + i));
}

int maxCardsPerDeck = 4;        
List<Deck> decks = new ArrayList();

Deck deck;
List<Card> deckCards = new ArrayList();
int cardCount = 0;
for (Card card : allCards) {
    cardCount++;
    deckCards.add(card);
    if (cardCount % maxCardsPerDeck == 0 ||
            cardCount == allCards.size()) {
        deck = new Deck("Deck");
        deck.getCards().addAll(deckCards);
        decks.add(deck);
        deckCards.clear();
    }
}

model.put("decks", decks);

Приведенный выше код довольно грубый - возможно, его можно улучшить. Но суть в том, что он собирает коллекцию колод, каждая из которых содержит не более максимально допустимого количества карт (в данном примере - 4).

Thymeleaf

<div class="card-deck"
     th:each="deck: ${decks}">
    <span th:text="${deck.deckName + ': '}">
    </span>
    <span class="card"
          th:each="card: ${deck.cards}"
          th:text="${card.cardName + ' '}">
    </span>
</div>

Я использовал <span> s здесь, просто так все выровнено. Вы можете использовать все, что вам нужно, и предоставить стиль CSS, который вам нужен.