我想在 springboat 中使用 thymeleaf 来显示几个 <div> 标签

问题描述 投票:0回答:1

我想从表中获取几个数据并将它们放入数组中 然后在 html 文件中,我想使用 th:each 从数组中获取数据 (抱歉弄得一团糟。这是我第一次使用堆栈溢出。我会找到更好的方法)

这是我在控制器中写的代码

    List<String> res_num_list = new ArrayList<String>();
    res_num_list.add("3");
    res_num_list.add("4");

    List<String> hotel_id_list = new ArrayList<String>();
    hotel_id_list.add("3");
    hotel_id_list.add("4");

    List<String> price_list = new ArrayList<String>();
    price_list.add("3");
    price_list.add("4");

    List<String> date_num_list = new ArrayList<String>();
    date_num_list.add("3");
    date_num_list.add("4");

    List<String> inq_date_list = new ArrayList<String>();
    inq_date_list.add("20000101");
    inq_date_list.add("20000101");

    List<String> category_list = new ArrayList<String>();
    category_list.add("hotel");
    category_list.add("hotel");

    List<String> room_list = new ArrayList<String>();
    room_list.add("standard");
    room_list.add("standard");
    
    List<String> people_list = new ArrayList<String>();
    people_list.add("2");
    people_list.add("2");
    
    
    List<String> testList = Arrays.asList("res_num_list", "hotel_id_list", "price_list",
            "date_num_list","inq_date_list","category_list","room_list","people_list");
    model.addAttribute("testArray", testList);

这是我用html写的

                            <div th:each="testItem : ${testArray}”>
                             <div class="review">
                                <div class="row">
                                    <!--end col-md-3-->
                                    <div class="col-md-9" >
                                        <div class="comment">
                                        
                                            <div class="comment-title">
                                                <h4>
                                                    <td th:text="${testItem.hotel_name}"></td>
                                                </h4>
                                                
                                            </div>
                                            <dl class="visitor-rating">
                                                
                                                <dt>room type</dt>
                                                <dd><td th:text="${testItem.room_list}"></td></dd>
                                                
                                                <dt>reservation date</dt>
                                                <dd><td th:text="${testItem.inq_date_list}"></td></dd>
                                                
                                                <dt>staying date</dt>
                                                <dd><td th:text="${testItem.date_num_list}"></td></dd>
                                                
                                                <dt>numper of people</dt>
                                                <dd><td th:text="${testItem.people_list}"></td></dd>
                                                
                                                <dt>request</dt>
                                                <dd><textarea name="request" cols="55" rows="3"></textarea></dd>
                                                
                                            </dl>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>

当我尝试使用 th:each 时,它没有显示在 chrome 上 但是当我删除 th:each 时,它确实出现了,我不知道为什么 谁能解释为什么?

html spring-boot twebbrowser
1个回答
0
投票

以下将起作用:

控制器。

@GetMapping("/reservation")
public String reservation(Model model) {
    Map<String, String> row1 = new HashMap<>();
    row1.put("hotel_name", "Claridges");
    row1.put("res_num", "3");
    row1.put("hotel_id", "3");
    row1.put("price", "3");
    row1.put("date_num", "3");
    row1.put("inq_date", "20000101");
    row1.put("category", "hotel");
    row1.put("room", "standard");
    row1.put("people", "2");

    
    Map<String, String> row2 = new HashMap<>();
    row2.put("hotel_name", "Dorchester");
    row2.put("res_num", "3");
    row2.put("hotel_id", "3");
    row2.put("price", "3");
    row2.put("date_num", "3");
    row2.put("inq_date", "20000101");
    row2.put("category", "hotel");
    row2.put("room", "standard");
    row2.put("people", "2");
    
    
    List<Map<String, String>> testList = Arrays.asList(row1, row2);
    model.addAttribute("testArray", testList);
    
    return "reservations";
}

reservations.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
                        <div th:each="testItem : ${testArray}">
                         <div class="review">
                            <div class="row">
                                <!--end col-md-3-->
                                <div class="col-md-9" >
                                    <div class="comment">
                                    
                                        <div class="comment-title">
                                            <h4>
                                                <td th:text='${testItem.hotel_name}'></td>
                                            </h4>
                                            
                                        </div>
                                        <dl class="visitor-rating">
                                            
                                            <dt>room type</dt>
                                            <dd><td th:text="${testItem.room}"></td></dd>
                                            
                                            <dt>reservation date</dt>
                                            <dd><td th:text="${testItem.inq_date}"></td></dd>
                                            
                                            <dt>staying date</dt>
                                            <dd><td th:text="${testItem.date_num}"></td></dd>
                                            
                                            <dt>numper of people</dt>
                                            <dd><td th:text="${testItem.people}"></td></dd>
                                            
                                            <dt>request</dt>
                                            <dd><textarea name="request" cols="55" rows="3"></textarea></dd>
                                            
                                        </dl>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>

但是添加一个 Reservation 类并在 Controller 中使用它是实际的 OOP。

预订

public class Reservation {
    

public Reservation(String hotel_name, String res_num, String hotel_id, String price, String date_num,
        String inq_date, String category, String room, String people) {
    super();
    this.hotel_name = hotel_name;
    this.res_num = res_num;
    this.hotel_id = hotel_id;
    this.price = price;
    this.date_num = date_num;
    this.inq_date = inq_date;
    this.category = category;
    this.room = room;
    this.people = people;
}
public String hotel_name;
public String res_num;
public String hotel_id;
public String price;
public String date_num;
public String inq_date;
public String category;
public String room;
public String people;

}

更新的控制器

@GetMapping("/reservation")
public String reservation(Model model) {
    Reservation res1 = new Reservation("Claridges", "3", "3", "3", "3", "20000101", "hotel", "standard", "2");
    Reservation res2 = new Reservation("Dorchester", "3", "3", "3", "3", "20000101", "hotel", "standard", "2");
        
    
    List<Reservation> testList = Arrays.asList(res1, res2);
    model.addAttribute("testArray", testList);
    
    return "reservations";
}

无需更改html页面。

© www.soinside.com 2019 - 2024. All rights reserved.