20

我已经使用 Safe Navigation Operator for Objects 来加载异步调用，这非常棒。我以为我可以为 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>
4

4 回答 4

15

有没有可以在数组上使用的安全导航运算符之类的东西？

是的，您正在寻找的是可选链运算符（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 中将可选链接与数组一起使用？.

于 2021-01-29T14:35:01.263 回答
12

有没有像安全导航运算符一样更简单（通过代码）的方式？

有三元运算符。

健康）状况 ？expr1 : expr2

<h6>{{simpleData?simpleData[0]:''}}</h6>
于 2017-06-20T07:34:18.397 回答
7

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

<h6>{{(simpleData || [])[0]}}</h6>
于 2019-11-11T11:35:10.087 回答
0

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

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

于 2020-02-24T14:33:50.030 回答