* ngFor и * ngIf не работают с ngx-slick-carousel в angular.Как это исправить? - PullRequest
Новая
       37

* ngFor и * ngIf не работают с ngx-slick-carousel в angular.Как это исправить?

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

Я делаю карусель, используя угловую ngx-slick-carousel. Он отлично работает со статическими данными, но когда я пытаюсь использовать * ngFor в div вместо статических данных, он отображает все div в строке ver ver вместо горизонтальных. Как решить эту проблему?

app.component.html 

  <div class="slider slider-nav">

    <div *ngFor="let i of numberArray">
      <h3>{{i}}</h3>
    </div>
  </div>
  <div class="action">
    <a href="#" data-slide="3">go to slide 3</a>
    <a href="#" data-slide="4">go to slide 4</a>
    <a href="#" data-slide="5">go to slide 5</a>
  </div>
</div>

// ---------------------------------
/* this shows perfect result
<div class="main">
  <div class="slider slider-nav">

    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
    <div><h3>7</h3></div>
  </div>
  <div class="action">
    <a href="#" data-slide="3">go to slide 3</a>
    <a href="#" data-slide="4">go to slide 4</a>
    <a href="#" data-slide="5">go to slide 5</a>
  </div>
</div>*/
// -----------------------------

В файле app.component.scss 

.main {
    font-family:Arial;
    width:500px;
    display:block;
    margin:0 auto;
  }
  h3 {
      background: yellow;
      color: #3498db;
      font-size: 36px;
      line-height: 100px;
      margin: 10px;
      padding: 2%;
      position: relative;
      text-align: center;
  }
  .action{
    display:block;
    margin:100px auto;
    width:100%;
    text-align:center;
  }
  .action a {
    display:inline-block;
    padding:5px 10px; 
    background:#f30;
    color:#fff;
    text-decoration:none;
  }
  .action a:hover{
    background:#000;
  }

В файле app.component.ts 

import { Component, OnInit } from '@angular/core';

declare var $: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'slickApp';
  numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  setCarousel() {
    $('.slider-nav').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
      dots: true,
      focusOnSelect: true
    });

    $('a[data-slide]').click((e) => {
      e.preventDefault();
      const slideno = $(this).data('slide');
      $('.slider-nav').slick('slickGoTo', slideno - 1);
    });
  }
  ngOnInit() {
    setTimeout(() => {
      this.setCarousel();
    }, 5000);
  }
}

В файле app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SlickCarouselModule } from 'ngx-slick-carousel';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SlickCarouselModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

В файл angular.json я также добавил следующие вещи 

"styles": [
     "src/styles.scss",
     "node_modules/slick-carousel/slick/slick.scss",
     "node_modules/slick-carousel/slick/slick-theme.scss"
    ],
    "scripts": [
     "node_modules/jquery/dist/jquery.min.js",
     "node_modules/slick-carousel/slick/slick.min.js"
    ],

Как я могу решить эту проблему?

...