html - 为什么在使用 *ngFor 后滑动 slider 不播放

Question

我在我的元素中使用 angular 7，我需要使用 swiper slider by idangero 制作一个高光部分，但是我在使用 *ngFor 时遇到了问题，我可以正确呈现数据，但 slider 不会播放除了我使用 ctr + shift + i 或打开它后的控制台。并且只为我输入的最后一个数据卡住了。我想要实现的是一个像 this page 这样呈现数据的 slider 。

我已经阅读了这个主题，但仍然没有解决我的问题:

Swiper issue after append slides

Swiper slider not working unless page is resized

这是我的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"
  }
],

有人可以帮我解决这个问题吗？数据本身已经呈现，但滑动器不会自动播放，我无法手动播放

Answer 1

从未使用过 swipper，但根据他们的 getting started页面，您需要“快速启动”它。

import Swiper from 'swiper';

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

因为这看起来依赖于 DOM 才能工作，所以我会确保在 View 完全加载后运行它。

类似

 import Swiper from 'swiper';

 // ...

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

据我所知，这显然有效:demo with your code