Comunidad Empresarial Dinamiza

 
 
  • No hay categorías

 
No te pierdas...
 

 
Publicado 02/08/2019 por admin en
 
 

ngif 예제

따라서 표시된 블록은 모든 값이 true인 경우에만 표시됩니다. 예를 들어 AND b는 true여야 합니다: 버튼을 클릭하면 IfExampleComponent이 DOM의 일부인지 여부뿐만 아니라 표시되는지 여부가 전환됩니다. 즉, 단추를 클릭할 때마다 IfExample구성 요소가 만들어지거나 소멸됩니다. 이는 비용이 많이 드는 만들기/삭제 작업이 있는 구성 요소에 문제가 될 수 있습니다. 예를 들어 구성 요소에 큰 자식 하위 트리가 있거나 구성될 때 여러 HTTP 호출을 할 수 있습니다. 이러한 경우 가능하면 ngIf를 사용하지 않는 것이 좋습니다. 구성 요소의 템플릿에서 ngIf 지시문을 사용하고 showAction의 값에 따라 작업 단추를 표시하거나 숨겨야 합니다. 다음은 템플릿의 예입니다: 다음은 예제 구성 요소에 ngIf 지시문을 바인딩하는 앱 구성 요소입니다. «가상»이된다는 것은 콘텐츠가 필요할 때까지 컴파일된 DOM에 실제로 존재하지 않는다는 것을 의미합니다. 필요할 때(예: «else» 표현식이 재생됨) Angular는 태그의 내용을 잡고 *ngIf 내용을 그것으로 바꿉습니다. ngIf의 또 다른 매우 유용한 응용 프로그램은 바인딩된 속성이 일부 속성을 표시하기 전에 null인지 확인해야 할 때입니다. 예를 들어 표시할 정보가 없는 경우 사용자의 정보가 있는 상자를 표시하는 것은 의미가 없습니다. 일반적으로 이렇게 하면 빈 상자가 표시됩니다.

몇 가지 예지만, 우리가 ngIf를 구성 할 수있는 가능한 방법에 대한 내 드리프트를 잡을 확신합니다. 좀 더 흥미로운 예로 넘어갑시다. 예제에서 이 것을 사용할 수 있습니다. 각 사람은 이제 나이뿐만 아니라 이름을 가지고있다. 바인딩된 속성의 하위 속성을 사용하고 있습니다. 예를 들어 사용자의 이름입니다. 사용자가 정의되지 않은 경우 이 속성에 액세스하면 오류가 발생합니다. 그러나 해당 속성을 사용하기 전에 null에 대한 사용자 속성을 확인하면 이를 방지할 수 있습니다. 각도 6 응용 프로그램에서 이를 달성하는 한 가지 방법은 ngIf 지시문을 사용하는 것입니다. NgIf를 사용하면 DOM에서 요소를 조건부로 추가하거나 제거할 수 있습니다.

ngIf 지시문을 사용하면 해당 속성이 null이거나 정의되지 않은 경우 이 상자를 모두 숨길 수 있습니다. ngSwitchCase 지시문을 사용하면 (1)의 식과 일치하는 경우 연결된 요소를 렌더링하는 조건을 정의할 수 있습니다.


admin