2016-10-07 13 views
5

* ngForを使用して、* ngForを使用して配列内のテンプレートを検索し、キーに基づいて要素を検索しようとしています。条件がキーと一致したら、* ngForを破りたい。条件に基づいてngForループを壊すためにangular2にオプションがあるかどうか疑問に思った。Angualr2でNgForループを中断する

+0

私はあなたがこの[回答](http://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor)からインスピレーションを得ることができると思います。 –

答えて

3

ngForを中断するオプションはありません。条件が満たされた要素の後に値を戻さないカスタムパイプを使用できます。

より具体的なアプローチについては、実際に達成しようとしていることについてより具体的な情報を提供してください。

1

ngForで中断するオプションはないので、別の方法で試すこともできます。

この方法では実際にはループを壊すことはありませんが、次の要素が偽であるかどうかを特定の条件が満たされた後に表示/実行するためにスキップします。

page.htmlpage.ts

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

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

でこの特定コードは、条件が満たされた場合であっても表示するようにさらに.check-divをエスケープ。つまり条件が満たされると、checkValueが異なるまでループは表示されません。