Pause NgFor Boucle Angulaire 2

Je suis en train d'effectuer une itération tableau à l'aide de *ngFor à l'intérieur du modèle et de recherche d'un élément en fonction de la clé, à l'aide de *ngIf. Maintenant, quand la condition est mise en correspondance avec la clé que j'ai envie de casser la *ngFor. Je me demandais si il y a une option dans angular2 pour briser la ngFor boucle basée sur l'état.

  • Je suppose que vous pouvez obtenir une source d'inspiration de cette répondre
InformationsquelleAutor deen | 2016-10-07
  1. 5

    Il n'y a pas d'option pour casser ngFor. Vous pouvez utiliser un tuyau qui ne retourne pas de valeurs après l'élément où la condition est remplie.

    Pour plus d'approches concrètes veuillez fournir des informations plus concrètes sur ce que vous essayez d'accomplir.

    InformationsquelleAutor Günter Zöchbauer
  2. 2

    Car il n'existe aucune option de faire une pause pour ngFor, Vous pouvez essayer une alternative bien.

    De cette façon, ne pas casser la boucle, mais ignore le prochain élément à afficher ou à exécuter après une certaine condition est remplie si l'élément suivant est vrai ou faux .

    Dans page.html

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

    Dans page.ts

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

    Ce code s'échappe le plus .check-div à l'écran, même si la condition est satisfaite. j'.e une fois que la condition est satisfaite, la boucle n'affiche pas jusqu'à ce que et à moins que le l' checkValue est différent.

    InformationsquelleAutor KCP
  3. 2

    J'ai dû interrompre la boucle j'ai donc suivi la démarche suivante.

    Je ne sais pas si c'est utile ou pas encore le partage de ce morceau de code.

    Que Gunter mentionné:

    Il n'y a pas d'option pour casser ngFor.

    C'est juste une autre façon de le faire.

    <ng-container *ngFor="let product of products; let i = index">
    <div *ngIf="i < 10">
        <span> product.name </span>
    </div>
</ng-container>
    InformationsquelleAutor Usama nadeem