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

是否有更简单（通过代码）方式，就像安全导航操作员一样？

有ternary operator。

条件？ expr1：expr2

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

Answer 2

<块引用>

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

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

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

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

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

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

致：

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

另见How to use optional chaining with array in Typescript?。

Answer 3

原因是品味问题，但在这种情况下，我倾向于使用较短的方法：

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

Answer 4

其他答案等同于同一件事，但我发现foo && foo[0]最易读。如果左侧是虚假的，则不会对逻辑和运算符的右侧进行评估，因此您可以放心地获得undefined（或者，如果您不相信Douglas Crockford，则可以猜到null。）最少的额外字符。

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

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

4 个答案: