Поле отображения Thymeleaf объекта списка

Question

у меня

<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}"

Answer 1

Пропустить внутренние ${...} фигурные скобки в ваших выражениях, обратитесь к itemStat.index напрямую. Вы уже используете синтаксис выражения тимелина, его не нужно использовать дважды.

Не уверен, что это единственная проблема с вашим кодом, но обязательно сначала исправим

Answer 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>