vaadin - 将 Java 集合字段绑定到 Vaadin Fusion 复选框组

Question

有一个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)

Answer 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[];

现在它完美无缺。