некорректное отображение роли в bootstrap-приложении

Question

Пишу небольшое приложение по технологии BootsTrap. Столкнулся с тем, что на информационной странице юзеров некорректно отображается роль в двух местах. Сейчас получается как на первой картинке, а должно быть как на второй. Вот код страницы:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>User page</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'}"
          integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
          crossorigin="anonymous">
    <script th:src="@{'https://code.jquery.com/jquery-3.5.1.slim.min.js'}"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"></script>
    <script th:src="@{'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'}"
            integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
            crossorigin="anonymous"></script>
</head>
<body>
<!--черная панелька сверху с именем юзера-->
<nav class="navbar navbar-dark bg-dark">
    <div class="navbar-brand inline">
        <b th:text="${user.getUsername()}">name</b>
                with roles:
                <b class="font-weight-normal" th:text="${user.roles}">role</b>
    </div>
    <div>
        <a href="/login" class="text-secondary">Logout</a>
    </div>
</nav>

<div class="row no-gutters vh-100">

    <!--    Левая панелька      -->
    <div class="col-md-2 bg-white">
        <ul class="nav nav-pills flex-column mt-3">
            <a class="nav-item nav-link active" th:href="@{/user}">User</a>
        </ul>
    </div>

    <!--  Центральная панелька-->
    <div class="col-md-10 bg-light">
        <div class="container-fluid">
            <div class="h1 mt-3">User information-page</div>

            <div class="col-md bg-light border">
                <h4 class=" mt-2 mb-3">About user</h4>
            </div>

            <div class="col-md bg-white border">
                <table class="table table-striped mt-4">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Age</th>
                        <th>E-mail</th>
                        <th>Role</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td th:text="${user.id}"></td>
                        <td th:text="${user.name}"></td>
                        <td th:text="${user.surname}"></td>
                        <td th:text="${user.profession}"></td>
                        <td th:text="${user.email}"></td>
<!--                        <td th:text="${user.authorities}"></td>-->
                        <td>
                            <th:block th:each="role : ${user.getRoles()}">
                                <a th:text="${role.role} "></a>
                            </th:block>
                        </td>
                    </tr>
                    </tr>
                    </tbody>
                </table>
            </div>    </div>    </div>    </div>    </div>
</body>
</html>

Ссылка на весь проект: https://github.com/faraponoff/BootsTrap1.git

БЛОГ НА HUSL

некорректное отображение роли в bootstrap-приложении

Ответы (0 шт):