Vaadin 23：转换内联Polymer模板渲染Grid列显示NaN而非值

问题出在Lit模板的表达式解析逻辑上：当你写${item.stylename-0}时，模板会把连字符-当作减法运算符，解析为item.stylename - 0。因为你的对象里并没有stylename这个属性（只有stylename-0），item.stylename会返回undefined，undefined - 0的结果就是NaN，最终渲染成style="NaN"。

修复方法有两种： #

方法1：使用括号语法访问带连字符的属性

修改模板字符串，用方括号形式访问属性：

grid.addColumn(LitRenderer.<SamplePerson>of("<span style='${item[\"stylename-0\"]}'> test </span>")
                .withProperty("stylename-0", dto -> "background-color: red"));

也可以改用单引号包裹属性名，避免转义：${item['stylename-0']}。

方法2：改用驼峰式命名的属性名

把属性名改成符合JavaScript标识符规则的驼峰式，避免连字符：

grid.addColumn(LitRenderer.<SamplePerson>of("<span style='${item.styleName0}'> test </span>")
                .withProperty("styleName0", dto -> "background-color: red"));

两种方法都能解决渲染出NaN的问题，可根据习惯选择。

内容的提问来源于stack exchange，提问作者STaefi