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

Question

我一直都有这种情况：一个实体列表（比如客户）和一个用于编辑所选实体的表单。我将表单字段绑定到当前选定实体的属性，如下所示：

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

只要我有一个 selectedCustomer 就可以工作，但情况并非总是如此。当我没有时，表格应该是空白的。我认为三元运算符可以这样使用：

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

但是 name 属性可能为 null（对于 Customer 实体来说看起来是人为的，但对我来说对于可为 null 的属性来说非常重要！）。我可以再次使用三元运算符修复它：

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

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

Answer 1

因为 lit-html 表达式只是 JavaScript，你必须像在任何其他普通 JavaScript 中一样进行错误处理。在这种情况下，您需要防范 undefined 并且 lit-html 对此无能为力，因为它永远不会看到表达式，只会看到结果值。

正如评论中所指出的，JavaScript 本身现在已经通过可选的链接和无效合并运算符解决了这个问题：

你最后一个例子现在看起来像这样：

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

这在 Chrome、Firefox、Edge、Babel、TypeScript 中受支持，Safari 应该很快就会支持。

lit-element bind to properties of an object that may be null or its subproperties may be null