Карусель начальной загрузки не работает после обновления данных в Angular 7 - PullRequest
Новая
       8

Карусель начальной загрузки не работает после обновления данных в Angular 7

0 голосов
/ 14 января 2019

В моем приложении 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) => {

    });
  }

}

Любая помощь будет оценена. Заранее спасибо.

1 Ответ

0 голосов
/ 14 января 2019

это рабочий демо

высмеивал сервисный вызов ... но неоднократно вызывал сервис с простым счетчиком, который вы можете заменить своей собственной сервисной логикой ...

...