Question

我的Angular 7应用程序中有一个Bootstrap传送带。我正在固定时间间隔内更新轮播数据。它是首次运行，但是一旦HTTP服务更新了幻灯片数组，轮播就会停止滑动。

这是组件html文件“ home.component.html”中的代码：-

<ngb-carousel *ngIf="slides.length > 0" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
  <ng-template ngbSlide *ngFor="let slide of slides" [id]="slide.id">

    <app-screen1 *ngIf="slide.type == 'screen1'" [slideData]="slide"></app-screen1>
    <app-screen2 *ngIf="slide.type == 'screen2'" [slideData]="slide"></app-screen2>

  </ng-template>
</ngb-carousel>

这是组件ts文件“ home.component.ts”。：-

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgbCarouselConfig, NgbCarousel } from '@ng-bootstrap/ng-bootstrap';
import { ApiService } from 'src/app/services/api.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  providers: [NgbCarouselConfig]
})
export class HomeComponent implements OnInit {
  @ViewChild(NgbCarousel)
  private ngbCarousel: NgbCarousel;

  intervalId: any;

  showNavigationArrows = false;
  showNavigationIndicators = false;

  slides = [];

  constructor(
    protected config: NgbCarouselConfig,
    private apiService: ApiService
  ) {
    config.interval = 2000;
    config.wrap = false;
    config.keyboard = false;
    config.pauseOnHover = false;
  }

  ngOnInit() {
    this.refreshData();
    this.intervalId = setInterval(() => {
        this.refreshData();
    }, 10000);
  }

  refreshData() {
    this.apiService.getData().subscribe((result) => {
      this.slides = result;
      // this.ngbCarousel.pause();
      // this.ngbCarousel.
      // this.config.interval = 3000;
    },
    (error) => {

    });
  }

}

任何帮助将不胜感激。预先感谢。

Answer 1

这是一个working演示

模拟服务调用...但是使用一个简单的计数器反复调用该服务，您可以用自己的服务逻辑替换该计数器...

在Angular 7中更新数据后，Bootstrap轮播无法正常工作

1 个答案: