Question

我已经使用Laravel构建了API，我的控制器调用了twitter，而Instagram则获取了我的最新帖子..这是相对较慢的，需要大约2秒才能完成并反馈到页面..我正在使用jQuery砌体使用angulars 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);

模板

         <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

您可以在针对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(...)时，将调用if(classe != null && classe.contains(“idiom”)) { Spannable spannable = new SpannableString(classe); spannable.setSpan(new ForegroundColorSpan(Color.BLUE), classe.indexOf(“idiom”), classe.indexOf(“idiom”) + “idiom”.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); txtclasse.setText(spannable); }。

Angular 2 - jQuery Masonry没有加载，因为它必须等待获取请求

1 个答案: