如何使用 vaadin fusion 加载组合框

Question

您好，我正在使用 vaadin 启动器来了解有关 vaadin 的更多信息。

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

我有问题要解决。

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

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

我的实体

用户

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;
    }

}

角色

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>

现在我明白了

How the combobox shows

提前谢谢各位。

Answer 1

我的解决方案是：

在我的 typecrypt 类中添加了 tis 行

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

@state 来自'lit/decorators.js'

然后在connectedCallback函数中添加了这一行

this.roles = await RolesEndpoint.listAll();

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

像这样：

@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>

我希望这会有所帮助。