Есть ли что-то вроде оператора безопасной навигации, которое можно использовать в массивах?

Question

Я использовал Safe Navigation Operator for Objects для загрузки асинхронных вызовов, и это довольно удивительно. Я думал, что смогу воспроизвести то же самое для массивов, но в моем коде 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

Есть ли что-то вроде оператора безопасной навигации, который можно использовать в массивах?

Да, то, что вы ищете, известно как оператор опциональной цепочки ( 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?.

Answer 3

Конечно, это дело вкуса, но в таких случаях я предпочитаю более короткий подход:

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

Answer 4

Другие ответы равносильны тому же, но я считаю foo && foo[0]быть максимально читаемым. Правая часть оператора логического-и не будет оцениваться, если левая часть ложна, поэтому вы смело получаетеundefined (или я думаю null, если вы не верите Дугласу Крокфорду.) с минимальным количеством дополнительных символов.

В этом отношении вы просили "более простое" решение, но на самом деле *ngIfвероятно, подходит для указанного вами варианта использования. Если вы воспользуетесь любым из ответов здесь, вы получите пустойh6тег, который вам не нужен. Если вы сделаете сам тег условным, вы можете просто поставитьfoo[0] на руле и будьте уверены, что он не будет оцениваться, когда foo все еще не определено, к тому же вы никогда не загрязняете страницу пустым тегом.