文章/答案/技术大牛

发布

社区首页 >问答首页 >使用ngFor循环时，冲压旋转滑块无法正常工作

问使用ngFor循环时，冲压旋转滑块无法正常工作
EN

Stack Overflow用户

提问于 2020-02-23 15:05:51

回答 1查看 472关注 0票数 1

我试着在我的网站(用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，如果我删除它，那么数据将显示。

这是打字代码

@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>

提前感谢

javascript

angular

typescript

回答 1

Stack Overflow用户

发布于 2021-01-27 03:13:50

我不能找出*ngFor不工作的原因，但我找到了一个解决方法，遵循以下步骤：

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

在.ts文件中导入jquery。

declare var jQuery: any;

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

loadSlider(){ return jQuery("#rev_slider").show().revolution({ sliderType：“标准”，sliderLayout："fullwidth"，scrollbarDrag：" true "，导航：{箭头：{启用:true }，触摸：{ touchenabled：“开”，swipe_threshold: 75，swipe_min_touches: 1，swipe_direction：“水平”，drag_block_vertical: false } }，网格宽度: 1170，网格高度: 770 })；}

迭代您需要在ts中迭代的对象，并使用它形成一个HTML字符串，或者继续附加到滑块元素。

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

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

this.loadSlider()

希望这能有所帮助。在这里看不到太多要解释的内容，但如果有问题可以提出来。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60359920

复制

相似问题

问使用ngFor循环时，冲压旋转滑块无法正常工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用ngFor循环时，冲压旋转滑块无法正常工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用ngFor循环时，冲压旋转滑块无法正常工作
EN