Angular2/4 定期更改 html 内容的最佳方式答案

【问题标题】：Angular2/4 best way to change html content periodicallyAngular2/4 定期更改 html 内容的最佳方式
【发布时间】：2017-09-28 21:07:43
【问题描述】：

不幸的是，我必须每隔 X 秒更改一次 html 元素的内容，因为我必须在这么小的空间内显示更多数据......我没有找到任何定期更改 html 元素的好例子，也许 angular2 动画是一个这很重要，但我应该如何解决每个 X 时间段的内容变化？顺便说一句，我必须将按钮的内容从 div 更改为具有不同样式、元素的另一个...

【问题讨论】：

标签： html angular animation

【解决方案1】：

Angular 是一个框架，它使用模板以声明的方式将模型绑定到视图。您所要做的就是定期更新您的模型，您的模板将自动为您更新。

例如，我们可以创建一个每秒发射一次的虚拟 observable，然后使用模板中的async 管道定期更新它。

@Component({
  selector: 'my-app',
  template: `Data: {{ data$ | async }}`,
})
export class AppComponent  {
  data$ = Observable.interval(400).mapTo(1).scan((a, b) => a + b, 0)
}

这是live demo。

当然，细节取决于您接收数据的方式以及您想要显示它的方式，但上面的示例表明定期更改 HTML 内容非常简单，这是您的问题。

【讨论】：

hmm，我只是希望有一个“更好”的方法来做到这一点:(我已经实现了一种方法，我像你一样使用可观察对象并通过 2 *ngIf 来操作模板。顺便说一句很棒代码，但真正的问题是，如果这是官方的方式来做这件事，还是有其他更好的方式？:)
老实说，我不知道它怎么能比这更好。你能描述一下你在寻找什么吗？
当然，我有一个包含很多元素的按钮，但不幸的是，在这个按钮上我有时必须显示 +2-3 信息，并且按钮上没有它们的位置......所以我想如果我尝试每 4-5 秒轮换一次此信息以向用户显示所有必要的信息会怎样
我看不出这个答案如何不涵盖该主题。创建一个间隔，您可以在其中循环要显示的值。使用模运算符循环求和。