angular - amTimeAgo 与 observable - 每 1 秒不断刷新

Question

使用

"angular2-moment": "^1.3.3",
"moment": "^2.18.1",

当我amTimeAgo在模板中使用管道时：

<div *ngFor="let issue of getIssues() | async ">
  {{ issue.time | amTimeAgo }}
  <!--{{ issue.time | amUtc }}-->
  <!--{{ issue.time | amLocal }}-->
  <p>{{ issue.time | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a' }}</p>
  {{ issue.time }}
  {{issue | json }}
</div>

，可观察到：

getIssues(): Observable<any[]> {

  return Observable.of([
    {
      name: "1",
      time: new Date(),
    },
    {
      name: "2",
      time: new Date(),
    },
    {
      name: "2",
      time: new Date(),
    }
  ]);
}

常量每秒刷新一次（每次都是 new new Date()）。

如何防止这种情况？

为什么每次都获取新数据？

我不希望每次都有新数据。另外，这将是一个 HTTP 调用，因此很昂贵。

我猜更改检测被触发得太频繁了......

我检查的其他管道似乎不会导致问题（例如 amDateFormat）

score 3 · Accepted Answer

您的方法每次调用时都会getIssues()创建一个新方法。Observable只要 Angular 出于某种原因执行变更检测，就会调用该方法。您可能有一些事件源（可能是一些计时器或鼠标事件处理程序）触发更改检测，以便刷新时间值。您可以只使用您发布的代码和一个按钮（和一个单击处理程序）创建一个简单的页面 - 当您单击按钮时，时间会刷新。

因此，唯一需要做的就是将 observable 分配给本地属性。

async管道调用告诉 Angular的ChangeDetectorRef.markForCheck()更改检测该组件可能发生了更改。有关更多详细信息，请参阅以下文章：

score 0 · Accepted Answer

为什么不在组件生命周期的 Init 步骤中创建时刻的快照，然后在多个结果中重用它（假设之后没有代码会改变日期对象）？

currentDate: Date;

ngOnInit(): void {
  this.currentDate = new Date();
}

getIssues(): Observable<any[]> {
  return Observable.of([
    {
      name: "1",
      time: this.currentDate,
    },
    {
      name: "2",
      time: this.currentDate,
    },
    {
      name: "2",
      time: this.currentDate,
    }
  ]);
}

ngOnInit在这里使用而不是构造函数很重要。

angular - amTimeAgo 与 observable - 每 1 秒不断刷新

2 回答 2

Related

Reference