Angular: Anwenden ngif aus einem Tag

Ich muss ein Array von Bildern, die in der Ansicht angezeigt werden, iterieren. alle 3 Bilder wird ein bestimmtes Div angewendet. manuell Ich habe es wie folgt tun:Angular: Anwenden ngif aus einem Tag

<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>

Allerdings habe ich diese Bilder in einer Datei setzen wollen, und dann laufen sie dynamisch Winkel verwenden. Das Problem ist, dass bestimmte div ich nur alle 3 verwenden muss, aber ich weiß nicht wie es geht, da ngIf bei mir nicht funktioniert.

Ich wollte wissen, ob Angular irgendeine Möglichkeit hat, dies zu tun.

In PHP habe ich so etwas wie dieses:

@if (Bedingung) hier würde ich die div hinzufügen @endif

hier würde ich die Bilder iterieren

@if (Bedingung) hier würde die div @endif

Quelle

2017-11-23 Maria Eva Villarreal

schließen können Sie verwenden

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

Dann können Sie die Variable i verwenden, um festzustellen, ob es das dritte ist, mit

(i+1) % 3 === 0

als i ist Null indiziert, mit dieser boolean, können Sie eine Klasse gelten oder eine andere div using * ngIf

Quelle

2017-11-23 16:09:44

Das Problem dabei ist, dass ngif vom Öffnen bis zum Schließen angewendet wird. Ich muss ein div nur hinzufügen, wenn diese Bedingung erfüllt ist, aber es gibt ein div (das, das das Bild zeigt), das immer geht –

Ich verstehe nicht völlig, sind Sie sicher, dass es nicht einen anderen Ansatz, den Sie nehmen könnten? vielleicht mit css background-img oder etwas ähnliches? –

Ich würde empfehlen, Datenstruktur zuerst vorzubereiten (Objekt dort jeden Schlüssel mit Array mit drei Bildern bewertet) und dann zwei verschachtelte ngFor-Direktiven (erstens durch Objektschlüssel, zweitens durch diese Schlüsselwerte) –

Angular: Anwenden ngif aus einem Tag

Antwort

Verwandte Themen