是否有类似安全导航运算符的东西可以用于数组？

Question

我已经使用对象的安全导航运算符来加载异步调用，这非常棒。我以为我可以为数组重现相同的内容，但它在我的 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

is there a more simpler(by code) way just like the Safe Navigation Operator?

有ternary operator.

condition ? expr1 : expr2

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

Answer 2

当然这是个人喜好问题，但在这种情况下我倾向于使用较短的方法：

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

Answer 3

其他答案都是一样的，但我发现 foo && foo[0] 是最易读的。如果左侧为假，则不会评估逻辑与运算符的右侧，因此您可以安全地得到 undefined（或者我猜 null，如果您不相信 Douglas Crockford。）最少的额外字符。

就此而言，您要求 "simpler" 解决方案，但实际上 *ngIf 对于您提供的用例可能是正确的。如果您使用此处的任何答案，您将得到一个您不需要的空 h6 标签。如果你使标签本身有条件，你可以把 foo[0] 放在 handlebars 中，并确信当 foo 仍然未定义时它不会被评估，而且你永远不会用空标签污染页面.

Answer 4

Is there something like a Safe Navigation Operator that can be used on Arrays?

是的，您正在寻找的是 可选链接 运算符 (JavaScript / TypeScript)。

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

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

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

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

收件人：

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

另见。

是否有类似安全导航运算符的东西可以用于数组？

Is there something like a Safe Navigation Operator that can be used on Arrays?

html

typescript

safe-navigation-operator

angular