Html 角度模板中的递增日期

我有下面这样的东西，我需要增量显示日期

{{item.name}

{{item.description}

{{date}日期：'dd/MM/yyyy'}

我不认为只有日期管道可以做到这一点，它的主要用途是将当前日期变形为不同的显示。不添加/删除。您可以创建自己的日期管道，该管道具有偏移选项

解决方案1 创建新管道并使用力矩库

import {Pipe, PipeTransform} from '@angular/core';
import * as moment from 'moment';

@Pipe({name: 'customDate'})
export class CustomDatePipe implements PipeTransform {
  transform(date, format = 'dd/MM/yyyy', dayOffset = 0, monthOffset = 0, yearOffset = 0) {
    return moment(new Date(date)).add(dayOffset, 'days')
                                 .add(monthOffset, 'months')
                                 .add(yearOffset, 'years')
                                 .format(format);
  }
}

然后在html中引用它，如下所示

<ul>
  <li *ngFor="let item of items; let i = index">
      <span>{{date | customDate: 'dd/MM/yyyy': i}}</span>
  </li>
</ul>

然后像这样引用它

<ul>
  <li *ngFor="let item of items; let i = index">
      <span>{{date | customDate: i | date: 'dd/MM/yyyy'}}</span>
  </li>
</ul>

{{date | customDate:i | date:'dd/MM/yyyy'}}

您能再解释一下这显示了什么以及您希望它显示什么，再加上您的

项

数组的示例吗？此外，在使用日期管道时，不需要使用

标记。您可以使用div或span。解决方案与items数组无关，只是可能需要使用索引。主要问题是关于显示第一个项目今天的日期，然后是第二个项目明天的日期，等等。我错过了

date

不是

项。date

这真的是最好的方法吗，为什么这比我只调用一个返回递增日期的函数要好。因为该函数将在每个摘要周期启动。管道将检查是否有任何变化，如果没有，则不会触发任何逻辑。您可以使用添加到html的函数中的console.log（）和pipe@Nnnnn下面是一篇解释管道如何优化程序的文章。我会跳到25分钟。

<ul>
  <li *ngFor="let item of items; let i = index">
      <span>{{date | customDate: i | date: 'dd/MM/yyyy'}}</span>
  </li>
</ul>