Angular 2 - jQuery Masonry не загружается, так как должен ждать запроса на получение

Я создал API с Laravel, мой контроллер звонит в твиттер и инстаграм, чтобы получать мои последние сообщения. Это относительно медленно, занимает около 2 секунд для завершения и обратной связи на странице. Я использую кладку jQuery для отображения этих элементы, использующие angulars ngFor - это все здорово, однако у меня есть каменная кладка, инициализированная при загрузке страницы, и в то время она должна ждать, пока сообщения будут загружены, в настоящее время я использую функцию тайм-аута, которая работает, но она не такая элегантная или надежная, есть ли способ, которым я могу отслеживать, когда ngFor закончил загрузку результатов, а затем одновременно инициализировать плагин masonry

сервис

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

шаблон

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

angular angular2-template angular2-services
person Kravitz    schedule 03.05.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете инициализировать контейнер в обратном вызове подписки против SocialObservable:

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(...).

person Thierry Templier    schedule 03.05.2016
comment
Отличный человек, пришлось обернуть его таймером на 1/2 секунды, но определенно более чистым решением. - person Kravitz; 03.05.2016
comment
я тоже!, но это приемлемо, потому что он охватывает время, когда angular ngFor заканчивает загрузку высот, оно не должно превышать 1/2 секунды. - person WilliamX; 28.07.2017