Angular 2 - jQuery Masonry 未加载,因为它必须等待获取请求
Angular 2 - jQuery Masonry not loading as it has to wait for get request
我已经构建 API Laravel,我的控制器会调用 Twitter 和 instagram 以获取我的最新帖子。这相对较慢,需要大约 2 秒才能完成并反馈到页面..我正在使用 jQuery masonry 来使用 angulars ngFor 显示这些项目 - 这一切都很好但是我在页面加载时初始化了 masonry 并且那时它必须等待帖子被拉入,目前我正在使用一个超时功能,但它不是那么优雅或可靠,有什么方法可以让我跟踪 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>
您可以在针对 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(...)
就会被调用。
我已经构建 API Laravel,我的控制器会调用 Twitter 和 instagram 以获取我的最新帖子。这相对较慢,需要大约 2 秒才能完成并反馈到页面..我正在使用 jQuery masonry 来使用 angulars ngFor 显示这些项目 - 这一切都很好但是我在页面加载时初始化了 masonry 并且那时它必须等待帖子被拉入,目前我正在使用一个超时功能,但它不是那么优雅或可靠,有什么方法可以让我跟踪 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>
您可以在针对 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(...)
就会被调用。