将Java Collection字段绑定到Vaadin Fusion复选框xgroup

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

现在它运行得很完美。