각도 : 태그 밖으로 ngif 적용

보기에 표시된 이미지 배열을 반복해야합니다. 특정 div가 적용될 때마다 3 개의 이미지가 표시됩니다. 수동으로 나는이처럼을하고있다 :각도 : 태그 밖으로 ngif 적용

<div class="logos w-slider" data-animation="fade" data-autoplay="1" data-delay="4000" data-duration="500" data-infinite="1"> 
    <div class="w-slider-mask"> 
    <br> 
    <div class="w-slide"> 
     <div class="clientes w-row" align="center"> 
     <div class="w-col w-col-2 w-col-small-4 w-col-tiny-4" style="float:left; width: 18%; height: 100%; text-align:center;"><img src="assets/assets/img/postgres.png"> 
     </div> 
     <div class="w-col w-col-2 w-col-small-4 w-col-tiny-4" style="float:left; width: 16%; height: 100%;"><img src="assets/img/php2.png"> 
     </div> 
     <div class="w-col w-col-2 w-col-small-4 w-col-tiny-4" style="float:left; width: 16%; height: 100%;"><img src="assets/img/serversql.png"> 
     </div> 
     </div> 
    </div> 
    <div class="w-slide"> 
     <div class="clientes w-row"> 
     <div class="w-col w-col-2 w-col-small-4 w-col-tiny-4" style="float:left; width: 18%; height: 100%; text-align:center;"><img src="assets/img/hibernate.png"> 
     </div> 
     <div class="w-col w-col-2 w-col-small-4 w-col-tiny-4" style="float:left; width: 16%; height: 100%;"><img src="assets/img/java2.png"> 
     </div> 
     <div class="w-col w-col-2 w-col-small-4 w-col-tiny-4" style="float:left; width: 16%; height: 100%;"><img src="assets/img/jquery.png"> 
     </div> 
     <div class="w-col w-col-2 w-col-small-4 w-col-tiny-4" style="float:left; width: 16%; height: 100%;"><img src="assets/img/json.png"> 
     </div> 
    </div> 
    <div class="w-slide"> 
     <div class="clientes w-row"> 
     <div class="w-col w-col-2 w-col-small-4 w-col-tiny-4" style="float:left; width: 18%; height: 100%; text-align:center;"><img src="assets/img/bootstrap-logo.png"> 
     </div> 
     <div class="w-col w-col-2 w-col-small-4 w-col-tiny-4" style="float:left; width: 16%; height: 100%;"><img src="assets/img/typescript.png"> 
     </div> 
     <div class="w-col w-col-2 w-col-small-4 w-col-tiny-4" style="float:left; width: 16%; height: 100%;"><img src="assets/img/ajax.png"> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

그러나, 내가 파일에 이러한 이미지를 넣어 다음은 각 사용하여 동적으로 실행하려는. 문제는 어떤 div는 매 3 년마다 사용해야한다는 것입니다. 그러나 ngIf가 나를 위해 작동하지 않기 때문에 어떻게 해야할지 모르겠습니다.

나는 Angular가 이것을하는 어떤 방법이 있는지 알고 싶었습니다. 나는 (조건) 나는 이미지를

@if을 반복 할 것이다 여기

@endif 사업부 를 추가

@if (조건) 여기 : PHP에서

나는 이런 식으로 뭔가를 사용 여기

출처

2017-11-23 Maria Eva Villarreal

@endif 사업부 을 닫을 것이다 당신은 사용할 수 있습니다

*ngFor="let img of imgs; let i = index"

은 그럼 당신은

(i+1) % 3 === 0

내가 색인 제로,이 부울을 사용하여, 당신은 클래스를 적용 할 수 있습니다로 사용하여,이 3 인 경우 감지하는 변수 i를 사용하거나 다른 수 div 사용 * ngIf

출처

2017-11-23 16:09:44

이 문제는 ngif가 열 때부터 닫히기까지 적용된다는 것입니다. 그 조건이 충족 될 때만 일부 div를 추가해야하지만, 항상가는 div (이미지를 보여주는 div)가 있습니다. –

나는 완전히 이해하지 못합니다. 당신이 취할 수있는 또 다른 접근법이 확실하지 않습니까? css background-img 또는 비슷한 것을 사용하고 계신가요? –

데이터 구조를 먼저 준비하고 (각 이미지에 3 개의 이미지가있는 배열로 지정된 각 키 객체를 만든 다음) 두 개의 중첩 된 ngFor 지시문을 사용합니다 (먼저 객체 키로, 두 번째 키 값으로) –

각도 : 태그 밖으로 ngif 적용

답변

관련 문제