lit-element绑定到对象的属性,该属性可以为null或其子属性可以为null

时间:2020-02-23 10:46:41

标签: lit-element lit-html

我一直都有这种情况:实体列表(例如客户)和用于编辑所选实体的表单。我将表单字段绑定到当前所选实体的属性,如下所示:

<some-element value="${this.selectedCustomer.name}"></some-element>

只要我有一个selectedCustomer(这并非总是如此),它就可以工作。当我没有人时,表格应该为空白。我认为可以像这样使用三元运算符:

<some-element value="${this.selectedCustomer ? this.selectedCustomer.name : ''}"></some-element>

但是接着问题就出在name属性上,该属性可能为空(对于Customer实体来说是人工的,但对我来说,具有可空属性非常重要!)。我可以再次使用三元运算符解决该问题:

<some-element value="${this.selectedCustomer ? (this.selectedCustomer.name ? this.selectedCustomer.name : '') : ''}"></some-element>

必须对所有实体的所有表单字段都执行此操作。我只想询问任何经验,这是否是最好的方法?

1 个答案:

答案 0 :(得分:2)

由于lit-html表达式只是JavaScript,因此您必须像在其他任何普通JavaScript中一样进行错误处理。在这种情况下,您需要提防class CelsiusTry{ public static void main(String[]args){ String s; double celsius, fahrenheit; s = JOptionPane.showInputDialog("Enter Celsius"); celsius = Double.parseDouble(s); fahrenheit = celsius * 1.8 + 32; JOptionPane.showMessageDialog(null, "Fahrenheit is: " + fahrenheit); } } ,并且lit-html对此无能为力,因为它永远不会看到表达式,而只会看到结果值。

正如评论中指出的那样,JavaScript本身现在已经通过可选的链接和无效的合并运算符解决了这一问题:

您的上一个示例现在看起来像这样:

undefined

Chrome,Firefox,Edge,Babel,TypeScript支持此功能,并且即将在Safari中提供。