如何在ngFor循环中的每个项目上更改相同HTML元素的内容（有延迟）？

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()来延迟显示的新闻项目，然后使用递归函数循环浏览所有新闻并重新开始。这是我用答案创建的stackblitz：https://stackblitz.com/edit/angular-bdpkbw

Answer 2

很抱歉回答，无法添加评论

为什么不使用$ interval来做到这一点？在每个间隔显示数组的元素。