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(),
    }
  ]);
}

常量每秒刷新一次（每次新的新Date（））。

如何防止这种情况？

为什么每次都会收到新数据？

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

我猜变化检测太频繁了......

我检查的其他管道似乎没有引起问题（例如amDateFormat）

Answer 1

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

所以唯一需要的是将observable分配给本地属性。

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

Answer 2

为什么不在组件生命周期的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而不是构造函数非常重要。

具有可观察性的amTimeAgo - 每1秒不断刷新

2 个答案: