角度2 - jQueryの石積みがリクエストを受け取るのを待たなければならない

Question

Iveが構築され、APIがLaravelで作成され、私の最新の投稿を取得するためにtwitterとinstagramが呼び出されます。これは約2秒私はjQueryの石積みを使ってこれらのアイテムを角度ngForを使って表示しています - これはすべて素晴らしいですが、私はページロード時に初期化された石積みを持っていますが、その時に投稿が引っ張られるのを待たなければなりませんで、現在は動作しますが、そのことエレガントまたは信頼性がない、私はngForは、その後、石造プラグインを初期化し、結果をロードし終えたときを追跡することができますどのような方法があるタイムアウト機能を使用してイム同時に

サービス

 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.')); 

     } 

コンポーネント

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

あなたはSocialObservableに対してサブスクリプションのコールバック内のコンテナを初期化することができ

  <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

テンプレート：

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

を私はSocialObservableが観測されているとしここではSocialObserverから来る...

この方法でthis._SocialObserver.next(this._dataStore.socialwall);が実行されると、container.masonry(...)が呼び出されます。