如何加载带有vaadin融合的combobox

Question

嗨，我使用vaadin启动器是为了了解更多关于vaadin的信息。

我刚开始一个新项目(Java+Typescript(

我有问题要解决。

我有一个Users和Rol实体，Rol是User的一个属性，问题是当我设置用vaading start创建的视图时，我试图设置一个组合框来加载用于创建新用户的角色，但到目前为止什么都不起作用。

在vaading网页的教程中，他们以一种不同于vaadin启动创建的拱门和文件的方式解决了这个问题，所以我认为这可能是另一种方法。

我的实体

用户

package com.example.application.data.entity;
import com.vaadin.fusion.Nonnull;
import com.example.application.data.AbstractEntity;
import javax.persistence.Entity;
import javax.persistence.ManyToOne;

@Entity
public class Users extends AbstractEntity {

@ManyToOne
@Nonnull
private Rol rol;

public Rol getRol() {
return rol;
}
public void setRol(Rol rol) {
this.rol = rol;
}
}

Rol

package com.example.application.data.entity;
import com.vaadin.fusion.Nonnull;
import com.example.application.data.AbstractEntity;
import javax.persistence.Entity;

@Entity
public class Rol extends AbstractEntity{

@Nonnull
private String name;
@Nonnull
private String description;

public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
}

为了在users-view.ts中选择一个角色，我应该如何将其加载到所有角色中

<vaadin-combo-box label="Rol" id="rol" ${field(this.binder.model.rol)} item-label-path="name"></vaadin-combo-box>

现在我得到这个

组合框如何显示

提前感谢各位。

Answer 1

我的解决方案是：

将tis行添加到我的typescrypt类

@state()
private roles: Rol[] = [];

'lit/decorators.js'中的@state

则在connectedCallback函数中添加了这一行

this.roles = await RolesEndpoint.listAll();

listAll()是我在endpoint类上创建的一个方法。

像这样：

@Nonnull
public List<@Nonnull Rol> listAll() {
return service.listAll();
}

在我的服务级别

public List<Rol> listAll() {
return repository.findAll();
}

现在您可以调用组合框元素中的数据

<vaadin-combo-box .items=${this.roles} label="Rol" id="rol"  ${field(this.binder.model.rol)} item-label-path="name" item-value-path="id"></vaadin-combo-box>

我希望这能有所帮助。