使用 ngFor 循环时，Themepunch 旋转滑块无法正常工作答案

【问题标题】：Themepunch revolution slider does not work correctly when using ngFor loop使用 ngFor 循环时，Themepunch 旋转滑块无法正常工作
【发布时间】：2021-01-27 03:32:50
【问题描述】：

我尝试在我的网站（使用 Angular 8 开发）上使用 Themepunch 提供的滑块革命，其中包含用于 JSON 文件的动态数据。因此，我需要像这样在 index.html 中的 CSS 和 js 文件

<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <!--Css Files-->
  <link href="assets/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/css/animate.css" rel="stylesheet">
  <link href="assets/css/all.css" rel="stylesheet">
  <link href="assets/css/theme.css" rel="stylesheet">

  //Here is the css files
  <link href="assets/css/rs-plugin/css/settings.css" rel="stylesheet">
  <link href="assets/css/rs-plugin/css/navigation.css" rel="stylesheet">


  <link href="assets/css/owl.carousel.min.css" rel="stylesheet">
  <link href="assets/css/jquery.smartmenus.bootstrap-4.css" rel="stylesheet">
  <link href="assets/css/style.css" rel="stylesheet">
  <link href="assets/css/custom.css" rel="stylesheet">
</head>
<body>
  <app-root></app-root> 

  <!-- js Files -->
  <script src="assets/js/jquery.js"></script>
  <script src="assets/js/popper.min.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
  <script src="assets/js/jquery.smartmenus.js"></script>
  <script src="assets/js/jquery.smartmenus.bootstrap-4.js"></script>

  // Here is the js files
  <script src="assets/js/jquery.themepunch.tools.min.js"></script>
  <script src="assets/js/jquery.themepunch.revolution.min.js"></script>
  <script src="assets/js/plugins.js"></script>
  <script src="assets/js/functions.js"></script>

  <script src="assets/js/custom.js"></script>
</body>
</html>

我使用一个组件将滑块显示为横幅。在该组件中，我使用 asyc 调用从 json 文件中获取 json 并更新数组，在组件 HMTL 中，我使用 ngFor 循环它绑定数组数据。但是，由于 ngFor 的原因，silder 没有显示任何数据，如果我删除它，则会显示数据。

这是打字稿代码

@Component({
  selector: 'app-banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.css']
})
export class BannerComponent implements OnInit, AfterViewInit {
  constructor(private file: FileService, public translate: TranslateService) { }
  @Input() entity: string;
  @Input() site;
  main_banner: any[] = [];
  revSlider: any;

  ngAfterViewInit() {
    this.initRevolutionSlider();
  }

  ngOnInit() {
    this.file.get(0, 'main_banner').then(r => {
      this.main_banner = r;
    }); 
  }

  get lang(): string {
    return this.translate.currentLang == 'ar' ? '_ar' : '_en';
  }

  identify(index, item) {
    return index;
  }

  counter: number = 0;

  initRevolutionSlider() {
    if ($('#revolutionSlider').get(0)) {
      this.revSlider = $('#revolutionSlider').show().revolution({
        sliderType: 'standard',
        sliderLayout: 'fullscreen',
        delay: 9000,
        responsiveLevels: [4096, 1200, 992, 576],
        gridwidth: [1100, 920, 680, 500],
        gridheight: 740,
        disableProgressBar: 'on',
        spinner: 'spinner3',
        parallax: {
          type: "on",
          levels: [20, 40, 60, 80, 100],
          origo: "enterpoint",
          speed: 400,
          bgparallax: "on",
          disable_onmobile: "off"
        },
        navigation: {
          arrows: {
            enable: true
          }
        },
      });
    }
  }
}

这里是 HTML

<div class="rev_slider_wrapper fullscreen-container">
  <div id="revolutionSlider" class="rev_slider fullscreenbanner" data-version="5.4.8" >
    <ul>
      <li data-transition="fade" *ngFor="let n of main_banner;trackBy:identify;">
        <img *ngIf="n.banner" src="{{n.banner}}"
             alt=""
             data-bgposition="center center"
             data-bgfit="cover"
             data-bgrepeat="no-repeat"
             data-kenburns="on"
             data-duration="20000"
             data-ease="Linear.easeNone"
             data-scalestart="110"
             data-scaleend="100"
             data-offsetstart="250 100"
             class="rev-slidebg" />

        <h1 class="tp-caption font-weight-bold text-color-light text-center text-white"
            data-x="center"
            data-y="center" data-voffset="['-70','-70','-70','-70']"
            data-width="['770','770','770','350']"
            data-start="1000"
            data-paddingtop="['11','11','11','16']"
            data-paddingbottom="['11','11','11','16']"
            data-fontsize="['50','50','45','35']"
            data-lineheight="['56','56','50','40']"
            data-transform_in="y:[100%];opacity:0;s:500;"
            data-transform_out="opacity:0;s:500;"
            style="white-space: normal;">
          {{n.name_en}}
        </h1>
      </li>
    </ul>
  </div>

</div>

提前致谢

【问题讨论】：

您能否在 Stackblitz 或通过您方便的任何其他来源分享您的应用的最小版本？
你找到出路了吗？我也在找一样的。

标签： javascript angular typescript

【解决方案1】：

我无法弄清楚 *ngFor 不起作用的原因，但我通过以下步骤找到了解决方法：

清除滑块 'ul' 内的所有内容并给它一个 id='rev_slider_ul'

<!--Slider-->
<div class="rev_slider_wrapper">
  <div id="rev_slider" class="rev_slider" data-version="5.0">
    <ul id="rev_slider_ul">

    </ul>
  </div>
</div>

在 .ts 文件中导入 jquery。

declare var jQuery: any;

定义一种方法来加载带有配置的滑块

loadSlider(){
    return jQuery("#rev_slider").show().revolution({
        sliderType: "standard",
        sliderLayout: "fullwidth",
        scrollbarDrag: "true",
        navigation: {
        arrows: {
            enable: true
        },
        touch: {
            touchenabled: "on",
            swipe_threshold: 75,
            swipe_min_touches: 1,
            swipe_direction: "horizontal",
            drag_block_vertical: false
        }
        },
        gridwidth: 1170,
        gridheight: 770
    });
}

迭代你需要在 ts 中迭代的对象，并用它形成一个 HTML 字符串或继续附加到滑块元素。
```
data.forEach((elem)=>{
    jQuery("#rev_slider_ul").append(${elem})
});
```
在 forEach 循环之外和之后，加载滑块

this.loadSlider()

希望对您有所帮助。此处没有太多可解释的内容，但如有问题欢迎提出。

【讨论】：