Question

我已经将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（），但仍然没有修复它。

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

Answer 1

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

另外考虑清除ngOnDestroy（）中的轮播对象。

其他人的例子：plunkr example

如何使用Angular2异步向owl-carousel添加项目

1 个答案: