Question

光滑的轮播正在使用静态数据。但是，如果我使用* ngFor重复项目，但它不起作用。我已尝试使用所有生命周期钩子（AfterContentInit，AfterViewInit，AfterViewChecked），请帮忙。

import {
  Component, OnInit
}
from '@angular/core';
declare
let jQuery: any;
import 'slick-carousel';

@
Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.less']
})
export class SliderComponent implements OnInit {

  constructor() {}

  ngOnInit() {
    jQuery(".slider").slick({        
      dots: false,
      arrows: true,
      slidesToShow: 6         
    })
  }

<div class="slider">
  <div *ngFor="let image of images">
    <img src={{image.name}} />
  </div>
</div>

Answer 1

我使用了setTimeout（）

  setTimeout( ()=>{
          this.initCarousel();
          this.showProduct = true;
        }, 1000);

initCarousel（）所在的位置

 $(".slider").slick({

  // normal options...
  infinite: true,
  dots: true,
  arrows: true,
  autoplay: true,
  slidesToShow: 5,
  slidesToScroll: 5,
  // the magic
  responsive: [
    {
      breakpoint: 1200,
      settings: {
          arrows: true,
          slidesToShow: 4,
          slidesToScroll: 4
      }
  },
    {

      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        infinite: true
      }

    }, {

      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        dots: true
      }

    }, {

      breakpoint: 300,
      settings: "unslick" // destroys slick

    }]
});

对我来说很好。完整代码：

this.api.getAllProducts()
  .pipe(map(actions => actions.map(a => {
    const data = a.payload.doc.data();
    const did = a.payload.doc.id;
    return {did, ...data};
  })))
    .subscribe(res =>{
      this.products = res;
      if(this.products.length > 0)
        setTimeout( ()=>{
          this.initCarousel();
          this.showProduct = true;
        }, 1000);
    });

光滑的轮播在angular2中的* ngFor指令中不起作用

1 个答案: