为什么 getElement().getProperty("value") 不起作用

Question

我在读取 Web 组件中的属性时遇到问题。我不明白为什么它不起作用。我创建了一个简单的例子，点击按钮后我应该得到属性的值，但它是空的。我不知道为什么？在我的其他测试中，setProperty 工作正常，但是 getProperty 总是获得与我在 setProperty 中设置的值相同的值。我也尝试在浏览器中更改属性。 PropertyChangeListener 在客户端更改值后也永远不会触发。为此花很多时间。谁能告诉我发生了什么？

HelloWorld.class

import com.vaadin.flow.component.DomEvent;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.littemplate.LitTemplate;

@Tag("hello-world")
@JsModule("./components/hello-world.ts")
public class HelloWorld extends LitTemplate {
    @DomEvent("click")
    public static class ClickEvent extends ComponentEvent<HelloWorld> {
        public ClickEvent(HelloWorld source, boolean fromClient) {
            super(source, fromClient);
        }
    }

    public HelloWorld() {
        setId("hello-world");
        getElement().addPropertyChangeListener("value", "change", e -> {
            System.out.println("change value: " + e.getValue());
        });
        addListener(ClickEvent.class, e -> System.out.println("getValue(): " + getValue()));
    }
    public void setValue(String value) {
        getElement().setProperty("value", value);
    }

    public String getValue() {
        return getElement().getProperty("value");
    }
}

hello-world.ts

import { LitElement, html, property} from 'lit-element';

export class HelloWorld extends LitElement {
    @property({type: String}) value = 'unset';

    render() {
        return html`
            <div>${this.value}</div>
            <button @click=${this._click}>Button</button>
        `;
    }

    _click() {
        this.value = 'Clicked';
        let click = new Event('click');
        this.dispatchEvent(click);
    }
}
customElements.define("hello-world", HelloWorld);

Answer 1

您已将属性值设置为在客户端触发change 事件时同步回服务器，但未触发此类事件。但是，有一个 click 事件，因此您可能需要更改 addPropertyChangeListener 以使用该 DOM 事件名称。