Сова Карусель не работает с Angular 7 - PullRequest
Новая
       8

Сова Карусель не работает с Angular 7

0 голосов
/ 09 января 2019

Сова Карусель не работает, когда применяется петля *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>

1 Ответ

0 голосов
/ 08 апреля 2019

Возможно, вы нашли решение, но я поставил ответ ради других. В 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.

Официальная ссылка, упомянутая выше, хорошо документирована и носит описательный характер. Дайте мне знать, если у вас возникнут какие-либо проблемы.

...