TemplateRenderer 返回空值（Vaadin Flow / 14.1）

Question

对于我的 Grid 中的其中一列，我使用 TemplateRenderer（显示的图标提示有关此问题的可能行）：

grid.addColumn(TemplateRenderer.<T>of("<iron-icon icon='[[item.icon.name]]' title='[[item.icon.tooltip]]' style='width: 1em;'></iron-icon>")
    .withProperty("icon", item -> StatusHint.of(item))
    ...
    ;

对于某些项目，此模板不相关（没有问题），因此属性 "icon" 是 null。结果是这样 HTML: <iron-icon style="width: 1em;" title="undefined"></iron-icon>.
另请注意 'icon' 属性未显示且标题属性未定义？！

虽然浏览器没有显示任何东西，但毫无头绪的HTML代码是丑陋的恕我直言（不知道是否也有性能惩罚）。

空单元格或 <div></div> 看起来好多了。

我该如何做到这一点？ API 没有给我任何提示。

Answer 1

它有点复杂，但是您可以使用 Polymer 的 dom-if 模板为您不能只绑定属性的情况创建条件子模板。这是一个根据 Person 的年龄是偶数还是奇数打印 "even" 或 "odd" 的示例：

grid.addColumn(
      TemplateRenderer.<Person>of(
      "<template is='dom-if' if='[[item.even]]'><b>even</b></template><template is='dom-if' if='[[!item.even]]'><i>odd</i></template>"
      ).withProperty("even", p -> {
            int age = p.getAge();
            return age % 2 == 0;
      }))
      .setHeader("Is age even or odd?");

TemplateRenderer 返回空值（Vaadin Flow / 14.1）

TemplateRenderer returning null (Vaadin Flow / 14.1)

vaadin

vaadin-flow