带百里香列表的Html

Question

我有这样的代码：

<ul th:each="pet : ${petCollection}">
    <li class="list-group-item">Dapibus ac facilisis in
        <button class="badge" onclick="window.location.href='/'">Continue</button>
        <button type="submit" class="badge">Info</button>
    </li>
</ul>

它的显示如下：

但我不希望我的列表中包含静态内容，所以我添加了这个：

<ul th:each="pet : ${petCollection}">
    <li class="list-group-item" th:text="${pet.petName}">Dapibus ac facilisis in
        <button class="badge" onclick="window.location.href='/'">Continue</button>
        <button type="submit" class="badge">Info</button>
    </li>
</ul>

然后我得到了这个：

长话短说，缺少按钮，任何想法的人我怎么能解决它？

Answer 1

当您将 th：text 添加到元素时，它会替换该元素的全部内容 - 在您的情况下，这会覆盖带有宠物名称的<button />标记。要解决此问题，您需要将 th：text 放在其自己的另一个标记中，以便其他标记不受影响。像这样：

<ul  th:each="pet : ${petCollection}">
  <li class="list-group-item">
    <span th:text="${pet.petName}">Dapibus ac facilisis in</span>
    <button class="badge" onclick="window.location.href='/'">Continue</button>
    <button type="submit" class="badge">Info</button>
  </li>
</ul>