프론트 개발2

현재 Thymeleaf를 활용하여 간단한 프론트를 개발하고 있다.

 

출발지, 도착지를 입력하면 이에 대한 경로를 보여준다.

하지만 보는것 과 같이 상세 경로가 조회되지 않는다.

 

위에서 th:object=${result}로 객체를 받았다. 이를 활용하여 정보를 출력하려고 한다.

 

pathLit 안에는 각 Path가 있고 각 Path 안에는 subPathList가 있으며 그 안에는 각 subPath가 있다.

 

따라서 th:each를 중첩 사용을 시도했다.

 

result에서 PathList를 꺼낸 Path에서 subPathList를 꺼내고 subPath를 꺼낸다.

<div id="paths">
    <div th:each="path : ${result.pathList}" class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                <table>
                    <tr>
                        <b><td th:text="${path.totalTime}+분"><b>소요시간(분) </b></td></b>
                    </tr>
                    <tr>
                        <td th:text="${path.totalDistance}+m">이동거리(미터)</td>
                    </tr>
                </table>
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body" th:with="subPathList=${path.subPathList}">
                <table class="table table-striped" >
                    <tr th:each="subPath :${subPathList}">
                        <li th:text="${subPath.toString()}"></li>
                        <tr>
                            <li th:if="${subPath?.trafficType} == 3" th:text="${subPath.sectionTime}+분">도보 이동거리</li>
                        </tr>
                        <tr>
                            <li th:if="${subPath?.trafficType} == 2" th:text="${subPath.startName}+정류장+${subPath.lane.busNo}+번 승차">버스탑승</li>
                        </tr>
                        <tr>
                            <li th:if="${subPath?.trafficType} == 2" th:text="${subPath.endName}+정류장+하차">버스하차</li>
                        </tr>
                        <tr>
                            <li th:if="${subPath?.trafficType} == 1" th:text="${subPath.startName}+역+${subPath.lane.name}+호선 승차">지하철 승차</li>
                        </tr>
                        <tr>
                            <li th:if="${subPath?.trafficType} == 1" th:text="${subPath.endName}+역 하차">지하철 하차</li>
                        </tr>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

하지만 traficType을 불러오는 과정에서 에러가 발생한다.

SpelEvaluationException: EL1007E: Property or field 'trafficType' cannot be found on null

view로 data가 넘어가기 전 시점에서 디버깅을 해봤다.

 

model에 담긴 trafficType은 null이 아니다.

1. th:each 중첩이 안되나? --> 이건가?

2. 필드 명을 잘못썼나? --> 아니다.