Angular - 在 ngFor 中使用时，日期管道不会更新值

Question

我有一个 Angular 项目，我有一个 ngFor，我想用来自 Angular 的 Date 管道显示值。

<tr *ngFor="let p of months"> 
         <td>{{ p.month | date:'LLLL' }}</td>
</tr>

p.month 的值基本上可以是 1、2 或 3 等等。

管道无法正常工作，总是显示“一月”。

但如果我只显示{{ p.month }}，那么在每个循环中我都会看到正确的值（1、2、3 等等）

我已经看到有不同的人有这个问题，我能找到的只是补充：

changeDetection: ChangeDetectionStrategy.OnPush

但是如果我添加这个，现在我的页面加载为空白，没有控制台错误，只是一个空白页面（页面的第一个元素是 ngFor，如果我在此之前添加一个带有字符串的简单 div，它会正确显示）

那么为什么ChangeDetection 会破坏我的页面？如何正确使用 ngFor 中的 Angular 日期管道？

Answer 1

您应该将Date 实例传递到日期管道中。

在您的模型中，您可以执行以下操作：

monthDates: Date[];

ngOnInit(): void {
  // this goes after wherever you are currently setting your months. 
  // I have used ngOnInit for demonstration purposes
  this.monthDates = this.months.map(m => new Date(1970, m - 1, 1));
}

然后在您的 html 中使用 Date 实例：

<tr *ngFor="let p of monthDates"> 
  <td>{{ p | date:'LLLL' }}</td>
</tr>

我假设您的月份数组是基于 1 的 - 1 = 一月，2 = 二月，等等。 请记住，javascript Date 对象中的月份是从 0 开始的 - 0 = 一月，1 = 二月，等等。