如何在 Spring Boot 中使用 Thymeleaf 输出具有唯一 ID 的列表中的元素？

Question

在我的实体 class 中，我有一个数组列表，其中存储了已注册学生的列表。每当我单击 student 按钮时，它都会显示一个已注册的学生列表。第一行的 below screenshot is my enroll student page. But when I click on the other button to show their own enrolled student list, it show the list。它应该是每个id的唯一记录。

为了我的尝试，我尝试编写 @requestMapping 来仅检索一个 id。所以当我点击学生按钮时，它只会return相应行的注册学生列表。但是失败了，那我现在应该怎么做才能得到每一行的唯一记录呢？

public class Exam {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(name = "duration", nullable = false, length = 100)
    private double duration;
    
    @ManyToMany
    @JoinTable(
            name="exam_enrolled_student",
            joinColumns = @JoinColumn(name = "exam_id"),
            inverseJoinColumns = @JoinColumn(name = "user_id")
    )
    private List<User> enrolledStudent = new ArrayList<User>();

控制器获取单个id的方法

@RequestMapping("/getOneExamSchedule")
    @ResponseBody
    public Optional<Exam> getOneExamSchedule(Long id){
        return examService.getOneExam(id);
    }

下面是学生按钮的代码和显示已注册学生列表的模式。

<tbody>
                        <tr th:each="exam: ${listExam}">
                            
                                
                            <td><a th:href="@{/getOneExamSchedule/(id=${exam.id})}" type="button" id="studentListDetailBtn" class="btn btn-primary" data-toggle="modal" data-target="#studentListModal">Student
                                    <span class="badge badge-light" th:text="${#lists.size(exam.enrolledStudent)}">[Number of elements]</span>
                                </a> 
                                <!-- Modal -->
                                <div class="modal fade" id="studentListModal"
                                    data-backdrop="static" data-keyboard="false" tabindex="-1"
                                    aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="staticBackdropLabel">Enrolled
                                                    Student List</h5>
                                                <button type="button" class="btn-close" data-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <ol th:each = "student:${exam.enrolledStudent}" class="list-group list">
                                                    <li
                                                        class="list-group-item d-flex justify-content-between align-items-start">
                                                        <div class="ms-2 me-auto">
                                                            <div id="studentName" th:text="|Student Name: ${student.username}|" class="fw-bold" >Student Name</div>
                                                            <ol class="list-group list ms-4">
                                                                <li id="studentEmail" th:text="|Email : ${student.email}|"></li>
                                                                <li id ="studentEduInst" th:text="|Educational Instituion : ${student.eduInst}"|></li>
                                                            </ol>
                                                        </div>
                                                    </li>
                                                    
                                                </ol>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-dismiss="modal">Close</button>
                                            </div>
                                        </div>
                                    </div>
                                </div> 
                            </td>
                        </tr>
                    </tbody>

Answer 1

您为 listExam 中的每个元素生成此模式 <div>，所有元素都使用相同的 studentListModal id。这些模式中的每一个都应该有一个唯一的 ID。

替换：

id="studentListModal"

与：

th:id="|studentListModal-${exam.id}|"

在模态本身上。

同时更新按钮上的触发器：

data-target="#studentListModal"

应该是：

th:attr="data-target=|#studentListModal-${exam.id}|"

（不能 100% 确定最后一个，请在浏览器中检查生成的 HTML 以确保它与模态的 ID 匹配）。

最后，不要从控制器方法中 return Optional。我建议使用：

@RequestMapping("/getOneExamSchedule")
    @ResponseBody
    public Exam getOneExamSchedule(Long id){
        return examService.getOneExam(id)
               orElseThrow( () -> new ExamNotFoundException(id));
    }

（其中 ExamNotFoundException 是您为应用程序创建的例外 class）。

如何在 Spring Boot 中使用 Thymeleaf 输出具有唯一 ID 的列表中的元素？

How to output the element in list with the unique id using Thymeleaf in Spring Boot?

html

java

thymeleaf

spring-boot