Angualr2에서 NgFor Loop 끊기

Question

* ngFor를 사용하여 배열 내부를 반복하고 * ngIf를 사용하여 키를 기반으로 요소를 검색하려고합니다. 이제 조건이 키와 일치하면 * ngFor를 중단하고 싶습니다. 조건에 따라 ngFor 루프를 해제하기 위해 angular2에 옵션이 있는지 궁금합니다.

Answer 1

ngFor을 중단 할 수있는 옵션이 없습니다. 조건이 충족되는 요소 뒤에 값을 반환하지 않는 사용자 지정 파이프를 사용할 수 있습니다.

보다 구체적인 접근 방법을 찾으려면 실제로 달성하려는 내용에 대한 구체적인 정보를 제공해주십시오.

Answer 2

ngFor를 중단 할 수있는 옵션이 없으므로 다른 방법으로 시도 할 수 있습니다.

이 방법은 실제로 루프를 중단시키지 않지만 특정 조건이 만족되면 다음 요소가 거짓인지 여부를 확인한 후 다음 요소를 건너 뛰고 표시합니다.

checkSameValue; //initialised before constructor 
displayCondition(checkValue, elementValue) { 
     if(this.checkSameValue && this.checkSameValue == checkValue) { 
      return false; 
     } 
     if(checkValue == elementValue) { 
      this.checkSameValue = checkValue; 
      return true; 
     } 
     } 

page.ts에서

<div class="loop-div" *ngFor="let element of array"> 
<div class="check-div" *ngIf="displayCondition(checkValue, element.value)" > {{displayValue}} </div> 
</div> 

page.html이 특정 코드는 조건을 만족하는 경우에도 표시 더 .check-div 탈출. 즉 조건이 만족되면 루프는 표시 될 때까지 그리고 표시되지 않을 때 checkValue이 표시됩니다.