Javascript 使用ngFor循环时，“旋转”滑块无法正常工作_Javascript_Angular_Typescript

Javascript 使用ngFor循环时，“旋转”滑块无法正常工作

javascript angular typescript

Javascript 使用ngFor循环时，“旋转”滑块无法正常工作,javascript,angular,typescript,Javascript,Angular,Typescript,我试图在我的网站（Angular 8中开发）上使用Themepunch提供的slider revolution，其中包含JSON文件的动态数据。因此，我需要index.html中的CSS和js文件，如下所示 <head> <meta charset="utf-8"> <title>Demo</title> <base href="/"> <meta name="viewport" content="width=de

我试图在我的网站（Angular 8中开发）上使用Themepunch提供的slider revolution，其中包含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>

这是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>




{{n.name_en}

提前感谢

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

清除滑块“ul”内的所有内容，并给它一个id='rev\u slider\u 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中迭代所需的对象，并用它形成HTML字符串，或继续附加到slider元素

data.forEach((elem)=>{
    jQuery("#rev_slider_ul").append(${elem})
});

在forEach循环外部和之后，加载滑块

this.loadSlider（）

希望有帮助。这里没有太多要解释的内容，但如果有问题的话，也会有很多问题。

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

清除滑块“ul”内的所有内容，并给它一个id='rev\u slider\u 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中迭代所需的对象，并用它形成HTML字符串，或继续附加到slider元素

data.forEach((elem)=>{
    jQuery("#rev_slider_ul").append(${elem})
});

在forEach循环外部和之后，加载滑块

this.loadSlider（）

希望有帮助。这里没有太多要解释的内容，但如果有问题，可以提出。

您可以在Stackblitz或通过任何其他方便的来源共享您的应用程序的最低版本吗？您能找到解决方法吗？我正在寻找相同的。你能在Stackblitz或通过任何其他对你方便的来源共享你的应用程序的最低版本吗？你能找到出路吗？我也在找同样的。