Bootstrap4项目中Thymeleaf循环内访问User字段报错的原因与解决

原因分析 #

1. th:field报错的核心原因 #

th:field是Thymeleaf与Spring MVC绑定的专属属性，它会自动关联模型中同名的表单对象（即Controller通过model.addAttribute("user", ...)传入的对象）。而你循环里的${user}是迭代产生的临时变量，不属于模型属性范畴，所以Thymeleaf会尝试查找模型中名为user的对象，找不到就抛出Neither BindingResult nor plain target object for bean name 'user' available as request attribute错误。

2. 下拉框无法默认选中的原因 #

替换成name+th:value后，下拉框的选中状态需要手动匹配用户当前部门ID与选项的value值，你没做这个判断；另外如果部门ID是数值类型（如Long），而选项的value被渲染为字符串，会因类型不匹配导致无法识别选中状态。

完整解决方案 #

方案一：前端动态填充模态框（推荐，适配模态框异步场景） #

1. 改造列表行的编辑按钮

给按钮添加自定义数据属性，存储当前用户的关键信息：

<tr th:each="user : ${users}">
    <td th:text="${user.id}"></td>
    <td th:text="${user.name}"></td>
    <td th:text="${user.department.name}"></td>
    <td th:text="${user.salary}"></td>
    <td>
        <button type="button" class="btn btn-sm btn-primary" 
                data-toggle="modal" data-target="#editUserModal"
                data-user-id="${user.id}"
                data-user-name="${user.name}"
                data-user-dept-id="${user.department.id}"
                data-user-salary="${user.salary}">
            编辑
        </button>
    </td>
</tr>

2. 调整模态框表单结构

用普通表单控件替代th:field，保留正确的name属性以便后端接收参数：

<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form th:action="@{/users/update}" method="post">
                <div class="modal-header">
                    <h5 class="modal-title">编辑用户</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <!-- 隐藏域存储用户ID -->
                    <input type="hidden" id="userId" name="id">
                    <div class="form-group">
                        <label>姓名</label>
                        <input type="text" class="form-control" id="userName" name="name">
                    </div>
                    <div class="form-group">
                        <label>部门</label>
                        <select class="form-control" id="userDept" name="department.id">
                            <option th:each="dept : ${departments}" 
                                    th:value="${dept.id}" 
                                    th:text="${dept.name}"></option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>薪资</label>
                        <input type="number" class="form-control" id="userSalary" name="salary">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

3. 添加JavaScript填充数据

监听模态框打开事件，从按钮的自定义属性中读取数据并填充到表单，同时处理下拉框选中：

$('#editUserModal').on('show.bs.modal', function (event) {
    const triggerBtn = $(event.relatedTarget);
    // 读取自定义属性数据
    const userId = triggerBtn.data('user-id');
    const userName = triggerBtn.data('user-name');
    const userDeptId = triggerBtn.data('user-dept-id');
    const userSalary = triggerBtn.data('user-salary');

    const modal = $(this);
    // 填充表单
    modal.find('#userId').val(userId);
    modal.find('#userName').val(userName);
    modal.find('#userSalary').val(userSalary);
    // 设置下拉框选中（自动匹配value值）
    modal.find('#userDept').val(userDeptId);
});

方案二：后端绑定编辑对象（传统服务端渲染场景） #

1. Controller中添加编辑用模型对象

在列表页面加载时，往模型中添加一个空的User对象作为编辑载体：

@GetMapping("/users")
public String listUsers(Model model) {
    model.addAttribute("users", userService.listAll());
    model.addAttribute("departments", departmentService.listAll());
    model.addAttribute("editUser", new User()); // 新增编辑用对象
    return "users/list";
}

2. 模态框表单绑定到editUser

<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form th:action="@{/users/update}" method="post" th:object="${editUser}">
                <div class="modal-header">
                    <h5 class="modal-title">编辑用户</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <input type="hidden" th:field="*{id}">
                    <div class="form-group">
                        <label>姓名</label>
                        <input type="text" class="form-control" th:field="*{name}">
                    </div>
                    <div class="form-group">
                        <label>部门</label>
                        <select class="form-control" th:field="*{department.id}">
                            <option th:each="dept : ${departments}" 
                                    th:value="${dept.id}" 
                                    th:text="${dept.name}"></option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>薪资</label>
                        <input type="number" class="form-control" th:field="*{salary}">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

3. 补充AJAX获取用户数据

点击编辑按钮时，通过AJAX请求后端接口获取用户详情，填充到editUser对应的表单控件中（需编写对应的Controller接口返回用户JSON数据）。

关键注意事项 #

• 确保下拉框选项的value值与用户部门ID的类型完全匹配（如都是Long或String），避免因类型不匹配导致选中失败。
• 方案一中的自定义数据属性如果包含特殊字符，建议用th:attr替代data-*直接赋值，避免渲染异常。

内容的提问来源于stack exchange，提问作者Sergey Zolotarev