时间戳

首页 > 解决方案 > owl carousel 不适用于 Angular 7

owl-carousel - owl carousel 不适用于 Angular 7

问题描述

owl carousel 在应用*ngFor角度循环时不工作，而在应用静态数据时工作正常。 

<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>

标签： owl-carouselangular7

解决方案

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

简而言之，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 使用单独的组件。

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

推荐阅读