почему слайдер не работает после использования * ngFor - PullRequest
Новая
       18

почему слайдер не работает после использования * ngFor

0 голосов
/ 26 мая 2019

Я использую Angular 7 для своего проекта, и мне нужно сделать выделенный раздел, используя swiper slider от idangero , но у меня возникла проблема при использовании *ngFor, я могу правильно отобразить данные, но слайдер не будет играть, если я не использую ctr + shift + i или консоль после открытия. и застрял только для последних данных, которые я ввел. то, чего я хочу достичь, - это слайдер, который отображает данные, такие как эта страница .

Я уже читал эту тему, но все еще не решил свою проблему:

Проблема с Swiper после добавления слайдов

Слайдер Swiper не работает, если размер страницы не изменяется

это мой html код: 

<!-- start slider section -->
<section class="no-padding main-slider height-100 mobile-height wow fadeIn ">
  <div class="swiper-full-screen swiper-container height-100 width-100 black-move">
    <div class="swiper-wrapper">

      <!-- start slider item -->
      <div class="swiper-slide cover-background" style="background-image:url('http://placehold.it/1920x991');" *ngFor="let data of allNews">
        <div class="container position-relative full-screen">
          <div class="col-md-12 slider-typography text-center text-md-left">
            <div class="slider-text-middle-main">
              <div class="slider-text-middle">
                <h1 class="alt-font text-extra-dark-gray font-weight-700 letter-spacing-minus-1 line-height-80 width-55 margin-35px-bottom lg-width-60 md-width-70 lg-line-height-auto sm-width-100 sm-margin-15px-bottom">{{data.title}}</h1>

                <p class="text-extra-dark-gray text-large margin-four-bottom width-40 lg-width-50 md-width-60 sm-width-100 sm-margin-15px-bottom">{{data.summary}}</p>

                <div class="btn-dual">
                  <a href="#" target="_blank" class="btn btn-transparent-dark-gray btn-rounded btn-small margin-20px-lr sm-margin-5px-top">Selengkapnya</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end slider item -->

    </div>
    <!-- start slider pagination -->
    <div class="swiper-pagination swiper-full-screen-pagination"></div>
    <!-- end slider pagination -->
  </div>
</section>
<!-- end slider section -->

для json: 

[{
    "_id": "5ceac4c07b8ae43702a9ed75",
    "title": "test 1",
    "summary": "Very Test 1",
    "imageCover": "5ceac4c07b8ae43702a9ed76 Cover.jpg"
  },
  {
    "_id": "5ceaa000e5f34b3a55b456ed",
    "title": "Test 2",
    "summary": "Very Test 2",
    "imageCover": "5ceaa000e5f34b3a55b486ed Cover.jpg"
  }
],

Может кто-нибудь помочь мне решить это? сами данные уже отрисовываются, но swiper не запускается автоматически, и я не могу вручную

1 Ответ

0 голосов
/ 27 мая 2019

Никогда не использовал swipper, но в соответствии с их страницей начала , вам нужно "запустить его". 

import Swiper from 'swiper';

var mySwiper = new Swiper('.swiper-container', { /* ... */ });

, поскольку похоже, что это зависит от работы DOM, я бы запустил его после полной загрузки представления.

так что-то вроде 

 import Swiper from 'swiper';

 // ...

 ngAfterViewInit() {
    const mySwiper = new Swiper('.swiper-container');
 }

это, очевидно, работает, насколько я могу судить: демонстрация с вашим кодом

...