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

如何解决为什么 getElement().getProperty("value") 不起作用

我在读取 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);

解决方法

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