динамически изменять элементы на слайде в компоненте Карусель ngx- bootstrap (Angular 8) - PullRequest
Новая
       9

динамически изменять элементы на слайде в компоненте Карусель ngx- bootstrap (Angular 8)

0 голосов
/ 20 апреля 2020

Я создал рабочий карусель с помощью ngx- bootstrap, он работает нормально, но сейчас я пытаюсь заставить [itemsPerSlide] динамически меняться в зависимости от ширины страницы. Я пытался использовать @HostListener('window:resize', ['$event']) onResize(event) {... в компоненте, но хотя значение «число» меняется в зависимости от ширины страницы, элементы на слайде не меняются на html, 

<!--<HTML>--->
<carousel [itemsPerSlide]="number">
  <slide *ngFor...>
    ....
  </slide>
</carousel>

<!--COMPONENT-->
@HostListener('window:resize', ['$event']) onResize(event) {
    this.width = event.target.innerWidth;
   if(this.width <= 480 /*small*/){
      this.number = 1
   }...

любой совет будет полезен.

1 Ответ

0 голосов
/ 20 апреля 2020

Мне не хватает дополнительной информации о вашей проблеме, но я сделал пример на Stackblitz, который решает ее. Я надеюсь, что это полезно, нажмите здесь .

Хотя я думаю, что лучший способ ограничить элементы, это было бы с CSS, с использованием медиа-запросов и селектор :not(:first-child) { display: none }.

...