将 Java 集合字段绑定到 Vaadin Fusion 复选框组答案

【问题标题】：Binding Java Collection field to Vaadin Fusion checkboxgroup将 Java 集合字段绑定到 Vaadin Fusion 复选框组
【发布时间】：2021-11-10 10:10:51
【问题描述】：

有一个Java模型：

public class User {

    private String username;
    @ElementCollection
    private List<String> roles;

}

有一个ts代码：

private binder = new Binder<User, UserModel>(this, UserModel);
...

<vaadin-checkbox-group
            .label="${translate("users.roles")}"
            ...="${field(this.binder.model.roles)}"
            theme="vertical"
            >
            <vaadin-checkbox value="ROLE_ADMIN" label="ADMIN"></vaadin-checkbox>
            <vaadin-checkbox value="ROLE_USER" label="USER"></vaadin-checkbox>
</vaadin-checkbox-group>

当我点击网格行 (this.binder.read(item)) 复选框时显示正确。但是，当我通过单击任何复选框或取消选择表中的行来更改值时，我收到了一个错误：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length')
    at HTMLElement._updateValue (vaadin-checkbox-group.js?84f6:314)
    at Object.runMethodEffect [as fn] (property-effects.js?c3e7:819)
    at runEffectsForProperty (property-effects.js?c3e7:157)
    at runEffects (property-effects.js?c3e7:121)
    at HTMLElement._propertiesChanged (property-effects.js?c3e7:1692)
    at HTMLElement._flushProperties (properties-changed.js?4bb0:354)
    at HTMLElement._flushProperties (property-effects.js?c3e7:1536)
    at HTMLElement._invalidateProperties (property-effects.js?c3e7:1506)
    at HTMLElement._setProperty (property-effects.js?c3e7:1491)
    at HTMLElement.Object.defineProperty.set (properties-changed.js?4bb0:153)

【问题讨论】：

Vaadin Fusion 的版本是 21。
当取消选择网格项目时，它会调用 this.binder.clear();
角色为空。您可以尝试初始化集合吗？
改成private List<String> roles = new ArrayList<>();结果一样

标签： vaadin vaadin-fusion hilla

【解决方案1】：

我删除了..="${field(this.binder.model.roles)}" 并通过放置\获取值

@query('#rolesCBG')
private rolesCBG!: CheckboxGroupElement;

...
//setting value
this.binder.value.roles = this.rolesCBG.value;
...
//getting value from the grid
this.rolesCBG.value = item.roles as string[];

现在完美运行了。

【讨论】：