어레이에서 사용할 수 있는 세이프 내비게이션 오퍼레이터 같은 것이 있습니까?

어레이에서 사용할 수 있는 세이프 내비게이션 오퍼레이터 같은 것이 있습니까?

나는 객체에 대한 안전한 탐색 운영자를 사용하여 비동기 호출에 로드해 보았는데, 그것은 꽤 놀랍습니다.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>

어레이에서 사용할 수 있는 세이프 내비게이션 오퍼레이터 같은 것이 있습니까?

예, 찾고 있는 것을 선택적 체인 연산자(JavaScript / TypeScript)라고 합니다.

MDN JavaScript 설명서에 표시된 구문은 다음과 같습니다.

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

따라서 원하는 것을 달성하기 위해서는 다음과 같은 예를 변경해야 합니다.

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

받는 사람:

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

유형 스크립트에서 배열과 함께 선택적 체인을 사용하는 방법도 참조하십시오.

안전 항법 조작자처럼 더 간단한(코드별) 방법이 있습니까?

3차 연산자가 있습니다.

조건 ? expr1 : expr2

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

물론 취향의 문제이지만, 그런 경우에는 더 짧은 접근법을 사용하는 경향이 있습니다.

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

다른 답들은 같은 것에 해당하지만, 저는 발견했습니다.foo && foo[0]가장 읽기 쉬운 것입니다.논리 연산자의 오른쪽은 왼쪽이 거짓이면 평가되지 않으므로 안전하게 얻을 수 있습니다.undefined(또는 내 생각엔null더글러스 크록포드(Douglas Crockford)를 믿지 않는다면), 최소한의 추가 캐릭터로.

그 문제에 대해, 당신은 "더 간단한" 해결책을 요구했지만, 사실은.*ngIf아마도 당신이 준 사용 사례에 맞는 것 같습니다.여기에 있는 답 중 하나라도 사용하면 빈칸이 표시됩니다.h6당신이 필요로 하지 않았던 태그.태그 자체를 조건부로 만든 경우에는 다음과 같이 입력할 수 있습니다.foo[0]핸들 바에서 그리고 그것이 평가되지 않을 것이라고 확신하세요.foo여전히 정의되지 않았습니다. 게다가 빈 태그로 페이지를 오염시키지도 않습니다.

언급URL : https://stackoverflow.com/questions/44646597/is-there-something-like-a-safe-navigation-operator-that-can-be-used-on-arrays