如何更改 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

抱歉回答，无法添加评论

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

Answer 2

您可以使用 setTimeout() 延迟显示的新闻项，然后使用递归函数循环遍历所有新闻并重新开始。这是我用答案创建的 stackblitz：https://stackblitz.com/edit/angular-bdpkbw

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

How to change the content of the same HTML element at every item in an ngFor loop (with delay)?

arrays

loops

delay

ngfor

angular