owl carousel不与Angular 7合作

Question

当应用静态数据时，在应用*ngFor循环时，owl carousel无法正常工作。

<div id="regular">
      <div  *ngFor="let banner of slider" class="item">
          <div class="container padding-top-3x">
            <div class="row justify-content-center align-items-center">
              <div class="col-lg-5 col-md-6 padding-bottom-2x text-md-left text-center">
                <div class="from-bottom"><img class="d-inline-block w-150 mb-4" src={{banner.logo.url}} alt="Puma">
                  <div class="h2 text-body mb-2 pt-1">{{banner.text1}}</div>

                  <div class="h2 text-body mb-4 pb-1">{{banner.text2}} <span class="text-medium">{{banner.price}}</span></div>
                </div><a class="btn btn-primary scale-up delay-1" href={{banner.hyperlink}}>View Offers&nbsp;<i class="icon-arrow-right"></i></a>
              </div>
              <div class="col-md-6 padding-bottom-2x mb-3"><img class="d-block mx-auto" src="{{banner.file.url}}" alt="Puma Backpack"></div>
            </div>
          </div>
        </div>
    </div>
    </owl-carousel>

Answer 1

您可能已找到解决方案，但我为其他人提供了答案。在Angular 6/7中使用新包“ngx-owl-carousel-o”，更多信息Here。请注意，不再支持旧包装。

简而言之，Owl团队已经创建了一个新的软件包，以支持Angular中的新功能，从而实现了一个新的软件包。但是，背后的基本概念是相同的，不应该像早期版本的Angular那样产生问题。

加价已经改变如下：

<owl-carousel-o [options]="customOptions">
  <ng-container *ngFor="let post of posts">
    <ng-template carouselSlide [id]="post.Id" [width]="post.Image.Width">
      <img [src]="post.Image.Url" [alt]="" >
    </ng-template>
  </ng-container>
</owl-carousel-o>

[options]属性在TypeScript文件中定义，我的建议是为Owl Carousel使用单独的组件。

上面提到的官方链接有很好的文档和描述性。如果您遇到任何问题，请告诉我。