如何使用Angular2将项目异步添加到owl-carousel答案

【问题标题】：How to asynchronously add items to owl-carousel using Angular2如何使用Angular2将项目异步添加到owl-carousel
【发布时间】：2017-06-13 19:52:10
【问题描述】：

我已将 owl-carousel 库导入到我的 Angular2 CLI 项目中，如果我有，它会正确显示：

<div class="owl-carousel owl-theme" #carousel >
    <div>item</div>
    <div>item</div>
    <div>item</div>
    <div>item</div>
</div>

但我需要轮播的数据来异步加载。因此，在我的组件的打字稿中，我已更新为：

...
this.getData().subscribe(
        d => {
            this.data = <Results>d;
        },
        error => {
            console.log(error);
        });
...

然后在我现在拥有的组件的 html 中：

<div class="owl-carousel owl-theme" #carousel >
    <div *ngFor="let item of data.items">
          <h1>Item name</h1>
          {{item.name}}
      </div>
</div>

但是显示不正确。数据已加载，但轮播未正确设置。我已经尝试在数据加载后调用元素的 owlCarousel() 但仍然没有修复它。

我不确定我做错了什么，有人知道如何解决这个问题吗？

【问题讨论】：

如何初始化插件？
我使用 npm install --save owl.carousel 安装了 owl.carousel 然后导入了 js 和样式。我使用 this.owlElement = jQuery('.owl-carousel'); 初始化轮播this.owlElement.owlCarousel();
尝试在this.data = <Results>d; 之后运行cdRef.detectChanges()，然后调用this.owlElement.owlCarousel() 另见stackoverflow.com/questions/43457149/…
可能是因为您从data 变量中选择了一个item 进行迭代？ <div *ngFor="let item of data.items">?
谢谢你！调用 cdRef.detectChanges() 修复它。如果您将其添加为答案，我会将其标记为答案

标签： angular typescript owl-carousel-2

【解决方案1】：

看起来您可以在 ngAfterViewInit() 中初始化轮播，而不是检测更改并更新 DOM。

还要考虑在 ngOnDestroy() 中清除轮播对象。

这里是别人的例子：plunkr example

【讨论】：