如何使用 vaadin fusion 加载组合框

Question

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

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

我有问题需要解决。

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

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

我的实体

用户

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

}

我应该怎么做才能加载所有角色，以便 select 我的 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 行 class

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

@state 来自 'lit/decorators.js'

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

this.roles = await RolesEndpoint.listAll();

listAll() 是我在 endpint class.

上创建的方法

像这样：

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

并为我服务class

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>

希望对您有所帮助。

如何使用 vaadin fusion 加载组合框

How to load a combobox with vaadin fusion

java

typescript

combobox

vaadin