是否有像安全导航操作员可以在阵列上使用的东西？

Question

我已经使用安全导航操作员对象来加载异步调用,这是非常了不起的.我以为我可以为Arrays重现相同但它在我的Angular代码中显示模板解析错误.我知道*ngIf是一种替代解决方案,但是有一种更简单(通过代码)的方式就像安全导航操作员一样吗？

<div class="mock">
   <h5>{{data?.title}}</h5>  //This works
   <h6>{{data?.body}}</h6>  //This works
   <h6>{{simpleData?[0]}}</h6>  // This is what I tried to implement    
</div>

Answer 1

是否像安全导航操作员一样更简单(通过代码)方式？

有三元运算符.

条件？expr1:expr2

<h6>{{simpleData?simpleData[0]:''}}</h6>   

Answer 2

当然，这是一个品味问题，但在这种情况下，我倾向于使用更短的方法：

<h6>{{(simpleData || [])[0]}}</h6>

Answer 3

是否有类似 Safe Navigation Operator 之类的东西可以用于数组？

是的，您正在寻找的是所谓的Optional Chaining运算符（JavaScript / TypeScript）。

MDN JavaScript 文档中显示的语法是：

obj.val?.prop
obj.val?.[expr]
obj.arr?.[index]
obj.func?.(args)

所以，为了实现你想要的，你需要改变你的例子：

<h6>{{simpleData?[0]}}</h6>

到：

<h6>{{simpleData?.[0]}}</h6>
                 ^

另请参阅如何在 Typescript 中对数组使用可选链接？.