オブジェクトに値は格納されているのに画面に値が表示されない、エラーも出ない
※Spring Bootのバージョンは2.4.1 です。
Spring Boot初心者になります。
学習中にサンプル画面を作っていた時の事でした。
(何かあればツッコんでいただけると助かります！)
本当はこんな画面を出したかったのですが
起こったのは
こんな感じ。
結論から言うと「バインド名のタイプミス」なのですが、コードによっては挙動が異なるので困惑しました。
（というか気づくまで時間がかかった）
以降は検証してみた結果（しかも「よくわからない」という結論です）なので、単純に類似事象の人はバインド名を誤りを見直してみてください！
興味のある方は続きを読んでいただければと。。。
検証
まずは正しく動く場合のサンプルコードです。
javaはコントローラのみで他は省略します。
DataDispController.java
@Controller
public class DataDispController {
@Autowired
DataDispService dataDispService;
@Autowired
ModelMapper modelMapper;
/** データ表示画面を表示 */
@GetMapping("/datadisp")
public String getDataDisp(Model model,DataDispForm form) {
// getProfile()は単純にProfileに値をセットしてるだけです
Profile profile = dataDispService.getProfile();
form = modelMapper.map(profile, DataDispForm.class);
model.addAttribute("dataDispForm",profile);
return "datadisp/datadisp";
}
}
DataDisp.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{css/datadisp/datadisp.css}">
<script th:src="@{/webjars/jquery/jquery.min.js}" defer></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}" defer></script>
</head>
<body class="bg-light">
<form id="user-detail-form" method="post" th:action="@{/datadisp}" class="form-signup" th:object="${dataDispForm}">
<div class="header border-bottom">
<h1 class="h2">プロフィール</h1>
</div>
<table class="table table-striped table-bordered table-hover profile-table-width">
<tr>
<th class="profile-th-width">名前</th>
<td class="profile-td-width" th:text="*{name}"></td>
</tr>
<tr>
<th class="profile-th-width">性別</th>
<td class="profile-td-width" th:text="*{gender}"></td>
</tr>
<tr>
<th class="profile-th-width">年齢</th>
<td class="profile-td-width" th:text="*{age}"></td>
</tr>
<tr>
<th class="profile-th-width">誕生日</th>
<td class="profile-td-width" th:text="*{#dates.format(birthday, 'yyyy/MM/dd')}"></td>
</tr>
<tr>
<th class="profile-th-width">出身地</th>
<td class="profile-td-width" th:text="*{hometown}"></td>
</tr>
</table>
</form>
</body>
</html>
Controllerを一部変更してみます
DataDispController.java（抜粋）
// model.addAttribute("dataDispForm",profile);
model.addAttribute("DataDispForm",profile);
再度画面を表示してみる
画面にもコンソールにもエラーは吐かれず、値が表示されないまま、しれっと画面は表示されてしまいます。
なんでエラー吐かないんだろう？
以下パターンで検証
| No. | HTML側バインド名 | Java側バインド名 | クラス名 | バインド対象のHTMLタグ | 確認の意図 |
|---|---|---|---|---|---|
| 1 | dispDataSample | DispDataSample | DispDataForm | form | バインド名≒クラス名のパターンの検証 |
| 2 | dispDataSample | DispDataSample | DispDataSample | form | バインド名=クラス名だけど、クラス名末尾が「～Form」でないパターンの検証 |
| 3 | dispDataSample | DispDataSample | DispDataSample | table | formタグに対して「～Form」って名前のクラスなのが悪さしてる？の検証 |
検証結果
| No. | 結果 |
|---|---|
| 1 | An error happened during template parsing～でエラー |
| 2 | An error happened during template parsing～でエラー |
| 3 | エラーなしで画面に各値表示されず |
結局のところ原因わからず
エラーが出ないと何がわるいのかわかりづらいし少し困るなーと思いました。
クラス名が「～Form」の時だけ起こる？ように見えるのでボンヤリ頭の片隅に覚えておくことにします。