Angular 2-jQuery未加载,因为它必须等待get请求
我用Laravel构建了一个API,我的控制器调用twitter,instagram获取我的最新帖子。。这是相对缓慢的,大约需要2秒钟才能完成并反馈到页面。。我正在使用jQuery Massy使用angulars ngFor显示这些项目-这一切都很好,但是我在页面加载时初始化了Massy,当时它必须等待帖子被拉入,目前我使用的是一个超时功能,它可以工作,但没有那么优雅或可靠,是否有任何方法可以跟踪ngFor何时完成加载结果,然后同时初始化插件 服务Angular 2-jQuery未加载,因为它必须等待get请求,angular,angular2-template,angular2-services,Angular,Angular2 Template,Angular2 Services,我用Laravel构建了一个API,我的控制器调用twitter,instagram获取我的最新帖子。。这是相对缓慢的,大约需要2秒钟才能完成并反馈到页面。。我正在使用jQuery Massy使用angulars ngFor显示这些项目-这一切都很好,但是我在页面加载时初始化了Massy,当时它必须等待帖子被拉入,目前我使用的是一个超时功能,它可以工作,但没有那么优雅或可靠,是否有任何方法可以跟踪ngFor何时完成加载结果,然后同时初始化插件 服务 public getSocia
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>
您可以在订阅回调中根据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
是SocialObservable
来自的可观察对象
当
This.\u SocialObserver.next(This.\u dataStore.socialwall)时,采用这种方式执行代码>时,将调用容器(…)
优秀的男人,必须用1/2秒的时间来包装,但绝对是更干净的解决方案……我也是!,但这是可以接受的,因为它涵盖了完成装载高度的时间,不应超过1/2秒。