每1s具有可观察的不断刷新的amTimeAgo

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

常量每秒钟刷新一次(每次新的日期())。

如何防止这种情况？

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

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

我想变化检测太频繁了.

我检查过的其他管道似乎没有引起问题(例如，amDateFormat)

Answer 1

每次调用getIssues()方法都会创建一个新的Observable。每当有什么理由要执行角度变化检测时，就调用该方法。您可能有一些事件源(可能是一些计时器或鼠标事件处理程序)触发更改检测，从而刷新时间值。您可以使用您发布的代码和一个按钮(以及单击处理程序)创建一个简单的页面--当您单击该按钮时，时间会被刷新。

因此，唯一需要的就是将可观测到的属性分配给本地属性。

async管道调用ChangeDetectorRef.markForCheck()，它告诉角度变化检测，这个组件可能有变化。有关更多细节，请参见以下文章：

• https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html
• https://blog.thoughtram.io/angular/2017/02/27/three-things-you-didnt-know-about-the-async-pipe.html

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而不是构造函数很重要。