英文:
Thyemleaf nested iteration triggers org.thymeleaf.exceptions.TemplateInputException
问题
以下是已翻译的内容:
我正在尝试迭代通过对象列表并且每个 4
个对象生成一个 div class="card-deck"
,并且为每个对象生成一个嵌套的 div class="card"
。
这是在 第234行 生成异常的代码。
更新: 注意:第234行 在 html
中被提及,并且由于 ${#numbers.sequence(0,3}
处缺少 )
,出现了 <!-- Error-Line 234 -->
。
<div class="card-deck" th:each="qr: ${objects}" th:if="${qr.tableid}%4==0"> <!-- 每4个对象迭代一次 -->
<!-- 语法错误,缺少右括号 ${#numbers.sequence(0,3) 导致在此处触发异常 -->
<div class="card" th:each="i : ${#numbers.sequence(0,3)} "> <!-- Error-Line 234 -->
<!-- 更多代码 -->
<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: 在模板解析过程中发生错误(模板:“class path resource [templates/qrcodes.html]” - 第234行,第10列)
我已经查阅了以下主题:
并且浏览了以下文档:
但仍然无法找到一个不触发异常的合适方法。
更新: 异常已解决,我尝试实现的逻辑没有预期的结果:
上述片段的结果:
假设有8张桌子,table1、table2 ... table8,我正在尝试为每4个或5个桌子生成一个 <div class="card-deck"
。由于 <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";
}
英文:
I'm trying to iterate through a list of objects and generate a div class="card-deck"
every 4
objects and a nested div class="card"
for every object.
This is the code that generates the exception on line 234
UPDATE: Note: line 234 is mentioned in html
and had the <!-- Error-Line 234 -->
due to a missing )
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: An error happened during template parsing (template: "class path resource [templates/qrcodes.html]" - line 234, col 10)
I've already been on these topics
- How to do if-else in Thymeleaf?
- Thymeleaf Loop Until a Number
- nested (double) loop with thymeleaf
- Thymeleaf - How to loop a list by index
and gone through this documentation
and still can't figure a proper way of doing it , without triggering an exception
UPDATE: Exception is fixed, the logic i'm trying implementing doesn't have the desired outcome:
Outcome of the above snippet:
Imagine there are 8 tables, table1, table2 ... table8 , i'm trying to generate a <div class="card-deck" ...
for every 4 or 5 tables. Due to <div class="card" th:each="i : ${#numbers.sequence(0,3)} ">
I get the 4 same tables.
qr.tableid
are the table numbers, 1 to x
For purposes of demonstration take a look at this java
snippet
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)+" ");
}
Output:
This is my 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";
}
答案1
得分: 2
以下是我翻译的部分:
End Result
跳转到最终结果,这将在浏览器中显示以下文本:
牌组:卡片1 卡片2 卡片3 卡片4
牌组:卡片5 卡片6 卡片7 卡片8
牌组:卡片9 卡片10 卡片11
更实用的是,HTML 如下:
<div class="card-deck">
<span>牌组: </span>
<span class="card">卡片1 </span>
<span class="card">卡片2 </span>
<span class="card">卡片3 </span>
<span class="card">卡片4 </span>
</div>
<div class="card-deck">
<span>牌组: </span>
<span class="card">卡片5 </span>
<span class="card">卡片6 </span>
<span class="card">卡片7 </span>
<span class="card">卡片8 </span>
</div>
<div class="card-deck">
<span>牌组: </span>
<span class="card">卡片9 </span>
<span class="card">卡片10 </span>
<span class="card">卡片11 </span>
</div>
Java 对象
牌组(Deck):
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;
}
}
卡片(Card):
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();
// 这相当于您的 findAll()...
List<Card> allCards = new ArrayList();
for (int i = 1; i <= 11; i++) {
allCards.add(new 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.getCards().addAll(deckCards);
decks.add(deck);
deckCards.clear();
}
}
model.put("decks", decks);
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>
我已经按照您的要求将翻译部分提供给您了。如有任何问题,请随时告知。
英文:
Here is an approach which I think represents what you are trying to do.
End Result
Jumping to the end result, this will display the following text in a browser:
Deck: Card1 Card2 Card3 Card4
Deck: Card5 Card6 Card7 Card8
Deck: Card9 Card10 Card11
More usefully, the HTML is as follows:
<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>
The Java Objects
The Deck:
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;
}
}
The Card:
public class Card {
private final String cardName;
public Card(String cardName) {
this.cardName = cardName;
}
public String getCardName() {
return cardName;
}
}
Assembling the Decks:
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);
The above code is fairly crude - it could probably be refined. But the point is: it assembles a collection of decks, with each deck containing no more than the allowed maximum of cards (4 in this example).
The 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>
I used <span>
s here, just so things are aligned. You can use whatever you need, and provide the CSS styling you need also.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论