Angular 2 - jQuery Masonry wird nicht geladen, da es auf die Anfrage warten muss

Question

Ive gebaut und API mit Laravel, mein Controller macht einen Aufruf an Twitter und Instagram, um meine neuesten Beiträge zu bekommen .. Dies ist relativ langsam dauert etwa 2 Sekunden Ich benutze jQuery Maurerarbeit, um diese Gegenstände mit Angulars anzuzeigen ngFor - Das ist alles toll, aber ich habe das Mauerwerk beim Laden der Seite initialisiert und muss zu diesem Zeitpunkt warten, bis die Posts gezogen sind in, die derzeit eine Timeout-Funktion im mit, die funktioniert, aber es ist nicht so elegant oder zuverlässig, ist es eine Möglichkeit, i der Spur halten kann, wenn die ngFor die Ergebnisse laden dann initialisieren das Mauerwerk Plugin gleichzeitig

der Service

beendet hat 210

 public getSocialMedia() { 

      this._http.get(this.apiUrl).map(response => response.json()).subscribe(data => { 
       // console.log(data.socialwall); 
       this._dataStore.socialwall = data.socialwall; 

       //console.log(this._SocialObserver); 

       this._SocialObserver.next(this._dataStore.socialwall); 

      }, error => console.log('Could not load socialwall.')); 

     } 

die Komponente

ngOnInit() { 

      var container = jQuery('#masonry'); 


      setTimeout(function() { 
       container.masonry({ 
        columnWidth: 5, 
        itemSelector: '.grid-item', 
        isFitWidth: true, 
        isAnimated: true, 
        gutter: 15, 
        animationOptions: { 
         duration: 300, 
         queue: false 
        } 
       }) 
       console.log('sdf'); 
      }, 5000); 

die Vorlage

  <ul class="list-reset social-wall-container" id="masonry"> 
      <li *ngFor="#social of socialwall | async" [outerHTML]="social.tile_content" (complete)="onCompletingTodo()"></li> 
     </ul> 

Answer 1

Sie den Behälter innerhalb des Rückruf des Bezugs gegen SocialObservable initialisieren könnte:

ngOnInit() { 
    this.this._SocialObservable.subscribe(() => { 
    container.masonry({ 
       columnWidth: 5, 
       itemSelector: '.grid-item', 
       isFitWidth: true, 
       isAnimated: true, 
       gutter: 15, 
       animationOptions: { 
        duration: 300, 
        queue: false 
       } 
      }) 
    }); 
} 

Ich nehme an, dass SocialObservable die beobachtbar ist wo die SocialObserver kommt aus ...

Auf diese Weise wird this._SocialObserver.next(this._dataStore.socialwall); ausgeführt, container.masonry(...) wird aufgerufen.