각도 2 템플릿에서 여러 조건 (ngIf)을 피하는 방법은 무엇입니까?

어떤 경우에는 템플릿에 많은 조건이 있습니다. ngIf에는 많은 조건이 있습니다. 어떻게 조건을 줄일 수 있습니다, 그것은 div를 표시하는 하나의 조건을 사용하거나 조건을 처리하고 숨기기/표시 요소에 몇 가지 방법을 사용하는 것이 좋습니다.각도 2 템플릿에서 여러 조건 (ngIf)을 피하는 방법은 무엇입니까?

<div (click)="createMessage()" class="message" *ngIf="array.length && message.queue && message.queue.length && !state || array.length && message.text && message.text.length && !state"> 
 
</div>

출처

2016-09-29 marcos

조건 중 하나가 변경되면 변경 감지가 실행될 때마다식이 실행되지 않습니다. –

감사합니다. 그러나 모든 것이 명확하지 않습니다. 이 변수에 대해 하나의 변수를 사용하면이 변수가 여러 조건으로 어떻게 업데이트됩니까? – marcos

표현의 일부가 바뀔 때마다이 변수를 업데이트해야합니다. 나는 이것이 귀하의 경우에 실용적인지 모르겠습니다. 이러한 변경 사항이 귀하의 코드에서 언제 발생하는지 저는 알 수 없습니다. –

을 당신 구성 요소에서 사용자 지정 메서드를 호출하여 *ngIf 조건 길이를 줄일 수 있습니다.

<div (click)="createMessage()" class="message" *ngIf="showCreateMessage(array,message)"></div>

// 정확한 요구 사항을 모르므로 메서드 이름이 의미가 없습니다. 구성 요소에서

showCreateMessage(array:any,message:any) 
{ 
    return array.length && message.queue && message.queue.length && !state || array.length && message.text && message.text.length && !state; 
}

은 구성 요소 클래스에 템플릿에서 그들을 이동 ngIf` *`에 참조하거나시 업데이트되는 * ngIf``에서 사용하는 하나의 변수를 유지

출처

2016-09-29 11:03:03 Nisam

코드가 실제로 인라인 가능하지 않은 경우 스 니펫 기능을 사용하지 마십시오. –

당신이 함수에이를 위임 및 매개 변수를 전달하지 않으면 당신은 정말 표현 하나를 줄일 수 없습니다하지만 당신은 같은 것을 시도 할 수 있습니다 :

*ngIf="!state && array.length && (message?.queue.length || message?.text.length)"

출처

2016-09-29 08:54:20 MatWaligora

고마워.하지만 너는 그런 식으로 쓸 수있을 것 같아. : * ngIf = "condition"또는 * ngIf = "condition()" – marcos

그래, 그런 식으로 쓸 수있다. 바인딩에서 함수를 사용하는 것은 매우 빈번하게 검사되고 응용 프로그램의 속도를 늦출 수 있으므로 권장하지 않습니다. –

각도 2 템플릿에서 여러 조건 (ngIf)을 피하는 방법은 무엇입니까?

답변

관련 문제