在 Angular 7 中更新数据后，引导轮播不工作

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 演示

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