Как изменить содержимое одного и того же элемента HTML в каждом элементе цикла ngFor (с задержкой)?

Question

Я занимаюсь разработкой приложения Angular 6 (с Bootstrap) и создал следующий шаблон:

<div class="news-container">
    <div class="new" *ngFor="let n of news">
        <div class="date">{{n.date}}</div>
        <div class="text">{{n.text}}</div>
    </div>
</div>

Я бы хотел показывать только одну новость за раз, поэтому каждый элемент массива в цикле *ngFor должен заменить предыдущий, а если цикл находится на последнем элементе, он должен снова перезапустить первый элемент.

Кроме того, было бы неплохо добавить задержку между элементом и следующим.

Вот как выглядит массив:

news: [
    {id: 1, date: '01-01-2018', text: 'this is a news'},
    {id: 2, date: '01-01-2018', text: 'this is another news'},
    {id: 3, date: '01-01-2018', text: 'breaking news'},
    {id: 4, date: '01-01-2018', text: 'foo bar'},
]

Знаете ли вы какое-либо решение для достижения этой цели?

Answer 1

Вы можете использовать setTimeout() для задержки отображаемых новостей, а затем с помощью рекурсивной функции переберите все новости и начните все сначала. Вот стек, который я создал с ответом: https://stackblitz.com/edit/angular-bdpkbw

Answer 2

Извините за ответ, не могу добавить комментарий

Почему бы не использовать $ интервал для этого? На каждом интервале показывается элемент массива.