Select LitElement 模板上的组件无法使用 Vaadin 20.0.3 注入到服务器端 Java

Question

Select 组件不适用于以下代码：

打字稿

import {LitElement, html} from 'lit-element';
import '@vaadin/vaadin-ordered-layout/vaadin-horizontal-layout.js';
import '@vaadin/vaadin-select/vaadin-select.js';
import '@vaadin/vaadin-list-box/theme/lumo/vaadin-list-box.js';
import '@vaadin/vaadin-item/theme/lumo/vaadin-item.js';

class LinkageToolbar extends LitElement {
    render() {
        return html`
            <vaadin-horizontal-layout>
                <vaadin-select id="linkagePosition">
                    <template>
                        <vaadin-list-box>
                            <vaadin-item>?</vaadin-item>
                            <vaadin-item>1</vaadin-item>
                            <vaadin-item>2</vaadin-item>
                            <vaadin-item>3</vaadin-item>
                            <vaadin-item>4</vaadin-item>
                            <vaadin-item>5</vaadin-item>
                            <vaadin-item>6</vaadin-item>
                            <vaadin-item>7</vaadin-item>
                            <vaadin-item>8</vaadin-item>
                            <vaadin-item>9</vaadin-item>
                        </vaadin-list-box>
                    </template>
                </vaadin-select>
            </vaadin-horizontal-layout>
            `;
    }
}

customElements.define('linkage-toolbar', LinkageToolbar);

Java

@Tag("linkage-toolbar")
@JsModule("./src/linkage-toolbar.ts")
@SuppressWarnings("serial")
public class LinkageToolbar extends LitTemplate {
    @Id("linkagePosition")
    private Select<String> linkagePosition;
}

代码在客户端工作，但不会在服务器端注入组件 Java。然后客户端出现如下错误：

FlowBootstrap.js?f80c:67 There seems to be an error in the Vaadin Select: You should only use either a renderer or a template for select content Please submit an issue to https://github.com/vaadin/vaadin-select/issues/new!

如何将 Select 组件注入服务器端 Java？你有什么想法吗？

Answer 1

如果您使用 @Id 绑定将元素连接到服务器端组件，您应该将元素的内容留空并在服务器上初始化内容。换句话说，而不是使用

 <vaadin-select id="linkagePosition">
                    <template>
                        <vaadin-list-box>
                            <vaadin-item>?</vaadin-item>
                            <vaadin-item>1</vaadin-item>
                            <vaadin-item>2</vaadin-item>
...

在您的 TypeScript 文件中，您应该只有

 <vaadin-select id="linkagePosition"></vaadin-select>

并在 Java 代码中初始化 select 值。

Select LitElement 模板上的组件无法使用 Vaadin 20.0.3 注入到服务器端 Java

Select component on LitElement template can not inject to server side Java with Vaadin 20.0.3

select

vaadin

lit-element

vaadin20