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>