Установить интервал для массива в угловом проекте

Вместо этого попробуйте этот способ.

pointer указывает на текущий контент, который вы хотите отобразить. С каждым интервалом указатель увеличивается на 1, пока не станет > 2. Затем он снова начинается с 0.

export class MessagesComponent implements OnInit {
  items = ['test 01', 'test 02', 'test 03'];
  currentItem: any;
  private pointer: number = 0;

  constructor() {}

  ngOnInit() {
      this.interval = setInterval(() => {
        this.currentItem = this.items[this.pointer];
        this.pointer++;
        if (this.pointer > 2) { this.pointer = 0 };
      }, 3000);
  }

}

Попробуй это:

export class MessagesComponent implements OnInit {
  items = ['test 01', 'test 02', 'test 03'];
  currentItem: any;
  private interval;

  constructor() {}

  ngOnInit() {
    for (let i = 0; i < this.items.length; i++) {
      this.interval = setInterval(() => {
        this.currentItem = this.items[i];
      }, 3000 * i);
    }
  }
}

{{ currentItem }}

Если вы довольны rxjs,

import { timer } from 'rxjs';
import { tap } from 'rxjs/operators';

ngOnInit() {
  timer(0, 3000)
    .pipe(
      tap(v => {
        this.currentItem = this.items[v%3]
      })
    )
    .subscribe(console.info);
}

меньше кода, нет цикла, нет причудливой логики :)

Вы можете сделать еще лучше с

export class MessagesComponent implements OnInit {
  private timer$ = timer(0, 3000);
  ngOnInit() {
    // for loop can be completely removed
  } 
}

а в html используйте

{{ items[(timer$ | async) % 3] }}

так что вы буквально просто используете 1 строку кода, чтобы сделать то же самое, используя асинхронный канал и rxjs, и забудьте об уродливом цикле for.

демо https://stackblitz.com/edit/angular-m5prrk?file=src%2Fapp%2Fapp.component.ts