如何使用 Thymeleaf 和 Bootstrap 显示 Spring 中的所有枚举值

Question

这是我的域 model object。

@ToString
public class Events {

    private long id;
    private static long nextId = 1L;

    @NotBlank(message = "name required")
    @Size(max = 50, message = "name too long")
    private String eventName;

    @NotBlank(message = "description required")
    @Size(max = 200, message = "description too long")
    private String eventDescription;

    @NotBlank(message = "email required")
    @Email(message = "invalid email address")
    private String emailAddress;

    private TypeOfEvents typeOfEvents;

    public Events(String eventName, String eventDescription, String emailAddress, TypeOfEvents typeOfEvents) {
        this.eventName = eventName;
        this.emailAddress = emailAddress;
        this.eventDescription = eventDescription;
        this.typeOfEvents = typeOfEvents;
        this.id = nextId;
        nextId = nextId + 1;
    }

    public Events(){}

    public long getId() {
        return id;
    }

    public String getEventName() {
        return eventName;
    }

    public void setEventName(String eventName) {
        this.eventName = eventName;
    }

    public String getEventDescription() {
        return eventDescription;
    }

    public void setEventDescription(String eventDescription) {
        this.eventDescription = eventDescription;
    }
    public void setEmailAddress(String emailAddress) {
        this.emailAddress = emailAddress;
    }
    public String getEmailAddress() {
        return emailAddress;
    }

    public TypeOfEvents getTypeOfEvents() {
        return typeOfEvents;
    }

    public void setTypeOfEvents(TypeOfEvents typeOfEvents) {
        this.typeOfEvents = typeOfEvents;
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (o == null || getClass() != o.getClass()) return false;
        Events events = (Events) o;
        return Objects.equals(eventName, events.eventName) && Objects.equals(eventDescription, events.eventDescription);
    }

    @Override
    public int hashCode() {
        return Objects.hash(eventName, eventDescription);
    }

这是我的枚举 class。

public enum TypeOfEvents {

    SEMINAR("Seminar"),
    BOOTCAMP("Bootcamp"),
    CRASHCOURSE("Crashcourse"),
    LIVEMEETING("LiveMeeting"),
    GATHERING("Gathering");

    private final String displayEventType;

    TypeOfEvents(String displayEventType) {
        this.displayEventType = displayEventType;
    }

    public String getDisplayEventType(){
        return displayEventType;
    }

这是我的 controller。

// this will render the create view template in localhost8080:events/create
@GetMapping("create")
public String renderCreateFormView(Model model) {
    model.addAttribute("title", "Create Event Form");
    model.addAttribute(new Events());
    // Here is where i pass all the enum values.
    model.addAttribute("types", TypeOfEvents.values());
    return "events/create";
}

这是模板的样子

<label>Type of Event</label>
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropDownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Select</button>
    <div class="dropdown-menu" aria-labelledby="dropDownMenu2" th:field="${events.typeOfEvents}">
        <button class="dropdown-item" type="button" th:each="type :${types}" th:value="${type}"
                th:text="${type.displayEventType}">
        </button>
    </div>
</div>

问题是我第一次使用 Thymeleaf + Bootstrap 并且每次运行我的应用程序时，下拉菜单项都没有显示（这是我的枚举类），尽管当我使用浏览器中的检查元素检查它时所有的价值观都在那里。

从我的浏览器屏幕截图中检查元素

Answer 1

更新！

我已经找到了解决问题的方法； 下拉列表未显示我的枚举 class 中的值的原因似乎是因为拥有最旧版本的 js 和 css 引导程序包，已经将其更改为最新版本的引导程序，它就像我想要的那样工作。