Question

猫头鹰圆盘传送带在角度应用*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>

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使用单独的组件。

上面提到的官方链接有据可查并具有描述性。让我知道您是否遇到任何问题。

猫头鹰轮播不适用于Angular 7

1 个答案: