2016-07-25 1 views
1

Ich baue einen Schieberegler mit einem Coverflow-Effekt, ich habe das jquery-flipster Plugin dafür verwendet.Angular 2: * ngFür CSS-Probleme

Ich kann es importieren und es wie die Demo funktionieren lassen, aber wenn ich es dynamisch mit der Direktive *ngFor machen will, ist das Ergebnis nur eine einfache Liste ohne den Coverflow-Effekt.

Ich habe die Arbeitsversion wie folgt aus:

<div id="coverflow"> 
     <ul class="flip-items"> 
      <li> 
       <img src="../../../img/text1.gif"> 
      </li> 
      <li> 
       <img src="../../../img/text2.gif"> 
      </li> 
      <li> 
       <img src="../../../img/text3.gif"> 
      </li> 
      <li> 
       <img src="../../../img/text4.gif"> 
      </li> 
      <li> 
       <img src="../../../img/text5.gif"> 
      </li> 
      <li> 
       <img src="../../../img/text6.gif"> 
      </li> 
     </ul> 
    </div> 

Aber mit der *ngFor Direktive Ich habe dies:

what I got with ngFor

Der Code:

<div id="coverflow"> 
    <ul class="flip-items"> 
     <li *ngFor="let tab of tabs"> 
      <img [src]="tab.url"> 
     </li> 
    </ul> 
</div> 

tabs ist ein Array, wo ich alle meine p ictures url (in einer JSON-Datei).

+1

Wann haben Sie Flipster initailiert (z. B. rufen Sie '$ ('. My-flipster') auf. Flipster();') War es in Ihrer ngOnInit-Methode? Der Konstruktor? Irgendwo anders? – Pace

+0

In der letzten Zeile hast du 'Tabs' anstelle von' Tab' gemeint, oder? – acdcjunior

+0

@Pace Ich initialisiere mein Flipster in ngOninit, ich denke das Problem kommt von hier, es initialisiert den Flipster wenn das div "leer" ist aber ich weiß nicht wie ich um dieses Problem arbeiten könnte – Rems

Antwort

1

Die ngOnInit() Methode ist noch zu früh im Lebenszyklus $('...').flipster() An diesem Punkt im Lebenszyklus zu nennen die Abhängigkeiten einer Komponente injiziert wurden, aber das DOM wurde so nicht generiert, wenn Sie flipster() die Abfrage zurückgeben gibt rufen leer und Das Plugin kann nichts machen.

Sie sollten die Lebenszyklusmethode ngAfterViewInit() verwenden, die aufgerufen wird, sobald die Ansicht und der Inhalt von angular konfiguriert wurden. Für einen Überblick über alle Haken werfen Sie einen Blick auf the docs.

Schließlich, wenn Ihre zugrunde liegende Liste sich überhaupt ändern wird, dann müssen Sie das Flipster-Plugin der Änderung benachrichtigen. Ich bin mir nicht sicher, ob das so einfach ist, wie $('...').flipster() wieder aufzurufen, oder wenn es etwas anderes gibt, das Sie tun müssen, um die Änderungen zu verfolgen. Die Flip-Dokumente scheinen diesen Fall nicht zu erwähnen.

+0

Danke! ngOnInit war das Problem, ändern Sie es durch noAfterViewInit das Problem zu lösen. – Rems