Angular 2 - * ngFor: Gibt es eine Möglichkeit, eine alternative Stoppbedingung zu verwenden?

Ich komme hierher, weil ich nach vielen Stunden Googeln keine Möglichkeit gefunden habe, eine alternative Stoppbedingung für die Schleifen zu verwenden, die mit der eingebauten Direktive gemacht wurden: * ngFor.Angular 2 - * ngFor: Gibt es eine Möglichkeit, eine alternative Stoppbedingung zu verwenden?

Eigentlich alle * ngFür die Schleife mit dieser Bedingung beenden: index < array.length. Ich möchte wissen, ob es eine Möglichkeit gibt, eine Schleife mit einer anderen Bedingung wie: abzuschließen.

Wenn Sie sich fragen, warum ich das tun wollen, ist es, weil ich auf einem Foto Galerie gerade arbeite, dass die Art und Weise arbeiten:

<div *ngFor="let pic of pics; let i = index"> 
    <div *ngIf="whichRowType(i) == 3"> 
     <small>pic[whichIndex(i)].id</small> 
     <small>pic[currentIndex + 1].id</small> 
     <small>pic[currentIndex + 2].id</small> 
    </div> 

    <div *ngIf="whichRowType(i) == 2"> 
     <small>pic[whichIndex(i)].id</small> 
     <small>pic[currentIndex + 1].id</small> 
    </div> 

    <div *ngIf="whichRowType(i) == 1"> 
     <small>pic[whichIndex(i)].id</small> 
    </div> 
</div>

In diesem Beispiel erstelle ich eine Reihe jeweils 3 Bilder. Ich habe drei Arten von Zeilen: - Zeigen Sie ein Bild, - Zeigen Sie zwei Bilder, - Zeigen Sie drei Bilder.

Das Problem ist, dass der Index meines ersten Bildes in jeder Zeile immer schlechter als der Index ist, der zum Anzeigen der Zeile verwendet wird. Wenn ich also alle meine Bilder anzeigen lassen möchte, muss ich in der Lage sein, meine Stop-Bedingung auf meinem * ngFor zu ändern.

Vielen Dank für Ihre Hilfe!

Quelle

2016-08-01 Guillaume Le Mière

Nur Sie andere Ökosysteme zu entlarven: Wenn Sie JSX verwendet würden Sie haben keine Verwirrung darüber (als nur JavaScript) und gut mit Typoskript unterstützt: https://www.youtube.com/watch?v=-oEa6UueHsk – basarat

Hoffe, dass dies auch für alternative von [Schleife Pause] helfen könnte (https://stackoverflow.com/questions/39911219/break-ngfor-loop-in -angualr2/44313643 # 44313643) – KCP

Vielen Dank für Ihre Hilfe! ;) –

ich mein Problem gelöst endlich eine hässliche, aber arbeiten Art und Weise ... Statt dessen anderes Ende Zustand des Schreibens ich eine Schleife tat mit ein Array mit Länge, das von einer Funktion berechnet wird. Ich lese mein anderes Array (das mit meinen Bildern) in dieser Schleife.

Angular sollte wirklich etwas dafür machen! Vielen Dank für Ihre Hilfe Jungs, ich habe das wirklich geschätzt!

Beispiel dafür, wie es zu lösen:

<div *ngFor="let galleryIndex of galleryIndexes; let i = index"> 
    <div *ngIf="whichRowType(galleryIndex) == 3"> 
     <small>pics[whichIndex(galleryIndex)].id</small> 
     <small>pics[currentIndex + 1].id</small> 
     <small>pics[currentIndex + 2].id</small> 
    </div> 

    <div *ngIf="whichRowType(galleryIndex) == 2"> 
     <small>pics[whichIndex(galleryIndex)].id</small> 
     <small>pics[currentIndex + 1].id</small> 
    </div> 

    <div *ngIf="whichRowType(galleryIndex) == 1"> 
     <small>pics[whichIndex(galleryIndex)].id</small> 
    </div> 
</div>

Quelle

2016-08-03 20:59:37

Vielleicht möchten Sie nur die Slice-Pipe https://angular.io/docs/ts/latest/guide/pipes.html verwenden –

*ngFor ein last Wert:

<div *ngFor="let pic of pics; let i = index; let last=last"> 
    <div *ngIf="last"> 
     ... 
    </div> 
    </div>

Siehe auch Implementing ngClassEven ngClassOdd for angular 2

Quelle

2016-08-01 18:42:29

Hallo! Vielen Dank für Ihre schnelle Antwort, aber es ist nicht das, wonach ich suche. Wie Sie in der Dokumentation von angular2 sehen können, wird "last" auf einen booleschen Wert gesetzt, der angibt, ob das Element das letzte in der Iteration ist. " Ich brauche nicht zu erkennen, wenn ich auf dem letzten Index bin, muss ich meine Schleife nach dem letzten Index fortsetzen. –

Keine Ahnung, was Sie mit Stop-Bedingung meinen. –

Was ich meine, ist, dass ngFor eine Schleife ist, die aufhört, wenn der Index Array.Length überlegen ist. Ich muss meine Schleife stoppen, wenn der Index einer Variablen meiner Klasse überlegen ist. –

Angular 2 - * ngFor: Gibt es eine Möglichkeit, eine alternative Stoppbedingung zu verwenden?

Antwort

Verwandte Themen