列表对象的 Thymeleaf 显示字段答案

【问题标题】：Thymeleaf display field of object of a list列表对象的 Thymeleaf 显示字段
【发布时间】：2019-11-16 16:10:36
【问题描述】：

我有

<table style="padding-top: 15px; padding-left: 50px; width: 1366px;">
    <tr>
        <thead>
        <th>STT</th>
        <th width="24%">Số tài khoản</th>
        <th width="24%">Tên ngân hàng</th>
        <th width="24%">Chi nhánh</th>
        <th width="24%">Tỉnh/TP của ngân hàng</th>
        </thead>
        <tbody>
        <tr th:each="item, itemStat : ${accountObjectForm.accountObjectBankAccountList}">
            <td><span th:text="${itemStat.index + 1}"></span></td>
            <td><input type="text" th:value="${accountObjectForm.accountObjectBankAccountList[0].bankAccount}" th:name="|accountObjectBankAccountList[${itemStat.index}].bankAccount|" th:id="|accountObjectBankAccountList[${itemStat.index}].bankAccount|" class="k-textbox" style="width: 100%;"></td>
            <td><input type="number" th:name="|accountObjectBankAccountList[${itemStat.index}].bankId|" th:id="|accountObjectBankAccountList[${itemStat.index}].bankId|" class="k-textbox" style="width: 100%"></td>
            <td><input type="text" th:name="|accountObjectBankAccountList[${itemStat.index}].bankBranchName|" th:id="|accountObjectBankAccountList[${itemStat.index}].bankBranchName|" class="k-textbox" style="width: 100%;"></td>
            <td><input type="text" th:name="|accountObjectBankAccountList[${itemStat.index}].province|" th:id="|accountObjectBankAccountList[${itemStat.index}].province|" class="k-textbox" style="width: 100%;"></td>
        </tr>
        <script>
            $(document).ready(function () {
                var dataBank = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "/banks_json",
                            dataType: "json"
                        }
                    },
                    pageSize: 30
                });

                $("input[name$='bankId']").each(function() {
                    $(this).kendoDropDownList({
                        optionLabel: "Chọn...",
                        dataTextField: "bankCode",
                        dataValueField: "id",
                        dataSource: dataBank,
                        index: 0,
                        change: onChangeBank
                    })
                });

                var dataProvinceBank = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "/provinces",
                            dataType: "json"
                        }
                    },
                    pageSize: 300
                });

                $("input[name$='province']").each(function() {
                    $(this).kendoDropDownList({
                        optionLabel: "Chọn...",
                        dataTextField: "text",
                        dataValueField: "value",
                        filter: "contains",
                        dataSource: dataProvinceBank,
                        index: 0,
                        change: onChangeProvinceBank
                    })
                });
            });
            function onChangeBank() { }
            function onChangeProvinceBank() { }
        </script>
        </tbody>
    </tr>
</table>

结果

（在新标签中打开图片以查看更大的屏幕截图）

在引擎盖下

我试试

<td><input type="text" th:value="${accountObjectForm.accountObjectBankAccountList[${itemStat.index}].bankAccount}" th:name="|accountObjectBankAccountList[${itemStat.index}].bankAccount|" th:id="|accountObjectBankAccountList[${itemStat.index}].bankAccount|" class="k-textbox" style="width: 100%;"></td>

但是报错，抓到这行代码页面无法渲染成html。

我使用0 作为持有人。请帮我按列表索引更改号码0。

th:value="${accountObjectForm.accountObjectBankAccountList[0].bankAccount}"

【问题讨论】：

标签： java spring spring-boot spring-mvc thymeleaf

【解决方案1】：

在表达式中省略内部${...} 大括号，直接引用itemStat.index。你已经在使用thymeleaf 表达式语法了，不需要再用两次了。

不确定这是否是您代码的唯一问题，但肯定首先要修复

【讨论】：

【解决方案2】：

另一种解决方案

<td><input type="text" th:value="${accountObjectForm.accountObjectBankAccountList[__${itemStat.index}__].bankAccount}" th:name="|accountObjectBankAccountList[${itemStat.index}].bankAccount|" th:id="|accountObjectBankAccountList[${itemStat.index}].bankAccount|" class="k-textbox" style="width: 100%;"></td>

【讨论】：