select - LitElement 模板上的选择组件无法使用 Vaadin 20.0.3 注入服务器端 Java

Question

选择组件不适用于以下代码：

打字稿

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

爪哇

@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 Vaadin Select 中似乎有错误：您应该只使用渲染器或模板来选择内容 请向https://github.com/vaadin/vaadin-select/提交问题问题/新！

如何将 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 代码中初始化选择值。