Angular - отображает 5 объектов на экране одновременно с задержкой

Question

У меня есть вызов службы REST, который возвращает ~ 24 записи.Я хотел бы отображать 5 из них одновременно на моем виде и циклически переключаться каждые 10 секунд.Ниже приведена одна из моих попыток, но она не работает ...

this.http.get<HomeListing[]>(`/api/HomeListing`).subscribe(z => {

  const totalCount = z.length;
  const pageSize: number = 5;
  let currentPage: number = 1;
  let endPoint = pageSize;
  let exitLoop: boolean = false;

  while (true) {
    if (currentPage * pageSize > totalCount) {
      endPoint = totalCount % pageSize;
      exitLoop = true;
    } else if (currentPage * pageSize === totalCount) {
      exitLoop = true;
    }
    this.homeListings = z.slice((currentPage - 1) * pageSize, endPoint);

    currentPage++;
    if (exitLoop)
      break;
  }
});

Может ли кто-нибудь указать мне правильное направление?

Answer 1

Если я не неправильно понял ваше требование, то вы должны получить элементы массива кусками «5» с интервалом в 10 секунд.Я достиг этого с помощью этого подхода, посмотрите:

export class AppComponent  {

  arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]

  startNewTimer = new Subject();

  maxImagestoDisplay: number = 5;

  slideInterval: number = 10000;

  sub: Subscription

  ngOnInit() {

    let maxCycle = Math.trunc(this.arr.length / this.maxImagestoDisplay);

    this.sub = this.startNewTimer.pipe(switchMap( (startVal: number) =>
      timer(startVal, this.slideInterval)
    ),tap(data => {
      if (data >= maxCycle) {
        this.startNewTimer.next(this.slideInterval)
      }
    })).subscribe(timerIndex => {
      console.log(this.arr.slice(timerIndex * this.maxImagestoDisplay, (timerIndex + 1 ) * this.maxImagestoDisplay));
    })

    this.startNewTimer.next(0)

  }
}

В этом коде работает таймер, который сбрасывает (уничтожает и создает новый) сам после того, как все элементы были созданы.Посмотрите, можете ли вы соответствовать требованиям, см. Пример здесь:

https://stackblitz.com/edit/angular-oo3xas?file=src%2Fapp%2Fapp.component.ts